【Vue3×TypeScript】 v-onを埋め込んでみる

<script setup lang="ts">
const itemName1 = 'Desk'
const itemName2 = 'Bike'

const price1 = 30000
const price2 = 50000

const url1 = 'https://www.amazon.co.jp/Anker-Wireless-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9%E5%85%85%E9%9B%BB%E5%99%A8-Watch%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC%E4%BB%98-USB%E6%80%A5%E9%80%9F%E5%85%85%E9%9B%BB%E5%99%A8%E4%BB%98%E5%B1%9E/dp/B09HBHDHWL/?_encoding=UTF8&pd_rd_w=sPVLu&pf_rd_p=09fc5329-add5-4943-82f6-96f98cfdada8&pf_rd_r=ARBBFSWTHCDAG33SD6AS&pd_rd_r=2dca66b0-bb15-42bf-8551-0ba834e182f9&pd_rd_wg=y1dHr&ref_=pd_gw_ci_mcx_mr_hp_atf_m'

const buy = () => {
  alert('購入すんのかよ');
}

</script>

<template>
<div class="container">
  <h1>最近の支出</h1>
  <div class="payment">
    <label>{{ itemName1 }}</label>
    <label>{{ price1 }} yen</label>
    <a v-bind:href="url1">ここで買いました</a>
    <button @click="buy()">購入</button>
  </div>
  <div class="payment">
    <label>{{ itemName2 }}</label>
    <label>{{ price2 }} yen</label>
  </div>
</div>
</template>

スクリプト内でアロー関数を定義

const buy = () => {
  alert('購入すんのかよ');
}

template側

<button @click="buy()">購入</button>

こんな感じでv-onを埋め込むことができる。