Cara mengikat acara pada tag dalam vue

Gunakan arahan v-on untuk mengikat peristiwa label dalam Vue.js Langkah-langkahnya adalah seperti berikut: Pilih label yang terikat dengan acara tersebut. Gunakan arahan v-on untuk menentukan jenis acara dan cara mengendalikan acara tersebut. Tentukan kaedah Vue untuk memanggil nilai arahan.

Teg acara mengikat dalam Vue

Dalam Vue.js, anda boleh mengikat acara DOM kepada kaedah dalam contoh Vue melalui arahan v-on. v-on 指令将 DOM 事件绑定到 Vue 实例中的方法。

语法：

<code><标签名 v-on:事件="方法名" other-props="...">...</标签名></code>

具体步骤：

1. 选择要绑定事件的标签：确定需要侦听事件的元素。
2. 添加 v-on 指令：使用 v-on 指令指定事件类型和处理事件的方法。例如，v-on:click 用于绑定点击事件。
3. 指定方法名：在 v-on 指令的值中指定要调用的 Vue 方法。方法名必须是 Vue 实例中的一个方法。

示例：

以下示例展示了如何绑定一个点击事件处理程序：

<code class="html"><button v-on:click="handleClick">点击我</button></code>

<code class="javascript">// Vue 实例
const app = new Vue({
  methods: {
    handleClick() {
      console.log("按钮被点击了！");
    }
  }
});</code>

当点击按钮时，handleClick 方法将被调用并输出一条消息到控制台。

注意事项：

• 事件名称应该遵循驼峰命名法（例如 v-on:click），而不是连字符形式（例如 v-on:on-click）。
• Vue 使用小写字母绑定事件，例如 v-on:click 而不是 v-on:onClick。
• 如果要绑定一个需要修饰符的事件（例如 v-on:click.stop

Sintaks: 🎜🎜rrreee🎜🎜Langkah khusus: 🎜🎜

1. 🎜Pilih teg tempat acara akan terikat: 🎜Tentukan elemen yang perlu mendengar acara tersebut. 🎜
2. 🎜Tambah arahan v-on: 🎜Gunakan arahan v-on untuk menentukan jenis acara dan kaedah pengendalian acara. Contohnya, v-on:click digunakan untuk mengikat peristiwa klik. 🎜
3. 🎜Nyatakan nama kaedah: 🎜Nyatakan kaedah Vue untuk dipanggil dalam nilai arahan v-on. Nama kaedah mestilah kaedah dalam contoh Vue. 🎜

🎜🎜Contoh: 🎜🎜🎜Contoh berikut menunjukkan cara mengikat pengendali acara klik: 🎜rrreeerrreee🎜Apabila butang diklik, kaedah handleClick akan dipanggil dan mengeluarkan mesej untuk menghiburkan. 🎜🎜🎜Nota: 🎜🎜

• Nama acara hendaklah mengikut huruf besar unta (cth. v-on:click) dan bukannya bentuk sempang (cth. v-on :on-click ). 🎜
• Vue menggunakan huruf kecil untuk mengikat acara, seperti v-on:click dan bukannya v-on:onClick. 🎜
• Jika anda ingin mengikat acara yang memerlukan pengubah suai (seperti v-on:click.stop), anda boleh menambah noktah (.) dan pengubahsuai selepas nama acara. 🎜🎜

Atas ialah kandungan terperinci Cara mengikat acara pada tag dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!