Vue.js 实现按钮单次点击功能 - 使用 v-on 指令

可以通过给按钮添加一个 disabled 属性来实现只能点击一次的功能。具体实现步骤如下：

1. 在 data 中添加一个变量，用来表示按钮是否可点击：

data() {
return {
  isDisabled: false
}
}

2. 在按钮上使用 v-bind 绑定 disabled 属性，并根据 isDisabled 的值来设置：

<button v-bind:disabled='isDisabled' v-on:click='handleClick'>点击我</button>

3. 在按钮的点击事件中，设置 isDisabled 为 true，禁止再次点击：

methods: {
handleClick() {
  // 处理点击事件
  this.isDisabled = true
}
}

完整代码如下：

<template>
<button v-bind:disabled='isDisabled' v-on:click='handleClick'>点击我</button>
</template>

<script>
export default {
data() {
  return {
    isDisabled: false
  }
},
methods: {
  handleClick() {
    // 处理点击事件
    this.isDisabled = true
  }
}
}
</script>