Vue Button 按钮的 click 点击事件

Question

使用 Vue，您可以将按钮点击与您想要执行的功能联系起来。 正式的方法是使用 v-on:click 属性，然而，Vue 有一个简洁的快捷方式 @click。

const app = new Vue({
  data: () => ({counter: 0}),
  template: `
    <div style="border-style:solid">
      <div>Number of button clicks: {{counter}}</div>
      <button @click="incrementCounter">Click Me!</button>
    </div>
  `,
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
});
app.$mount("#content");

Vue的 @click 还支持 修饰符 。 例如，如果您只希望一个按钮被单击一次，而不是创建一个布尔变量，您可以追加 .once 到 v-on:click 要么 @click。

const app = new Vue({
  data: () => ({counter: 0}),
  template: `
    <div style="border-style:solid">
      <div>Number of button clicks: {{counter}}</div>
      <button @click.once="incrementCounter">Click Me!</button>
    </div>
  `,
  methods: {
    // Will only be called at most once, even if you try to click the button multiple times.
    incrementCounter() {
      this.counter++;
    }
  }
});
app.$mount("#content");