「短文」关于 Vue 中的按钮点击事件

使用 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");

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载