Vue.js 实现按钮只可点击一次

<template>
  <button :disabled='disabled' @click='handleClick'>Click me</button>
</template>
<script>
export default {
  data() {
    return {
      disabled: false, // 初始状态下按钮可以点击
    }
  },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.disabled = true // 禁用按钮
        // TODO: 执行点击事件的逻辑
      }
    },
  },
}
</script>
<p>在上述代码中，我们在组件的 data 中定义了一个名为 'disabled' 的状态变量，初始值为 'false'。在点击事件中，我们首先判断 'disabled' 的值是否为 'false'，如果是，则将其赋值为 'true'，表示按钮已被禁用，此时再次点击按钮将不会触发点击事件。如果需要重新启用按钮，只需要将 'disabled' 的值重新赋为 'false' 即可。</p>