Vue 实现按钮只能点击一次 - 完整指南与代码示例

<template>
  <button v-on:click='handleClick' v-bind:disabled='isClicked'>点击一次</button>
</template>
<script>
export default {
  data() {
    return {
      isClicked: false
    };
  },
  methods: {
    handleClick() {
      if (this.isClicked) {
        return;
      }
      // 执行需要的操作
      console.log('按钮被点击了！');
      this.isClicked = true;
    }
  }
};
</script>
<p>使用 Vue 指令来实现按钮只能点一次的效果，具体实现步骤如下：</p>
<ol>
<li>
<p>在按钮上使用 <code>v-on</code> 指令绑定 <code>click</code> 事件，并定义一个方法来处理点击事件；</p>
</li>
<li>
<p>在该方法中，先判断按钮是否已经被点击过，如果是则直接返回；否则，将按钮状态设置为已经点击过，并执行需要的操作；</p>
</li>
<li>
<p>在按钮上使用 <code>v-bind</code> 指令绑定 <code>disabled</code> 属性，根据按钮状态来动态设置该属性，实现按钮只能点一次的效果。</p>
</li>
</ol>
<p>在上面的示例代码中，我们首先定义了一个 <code>isClicked</code> 属性来表示按钮是否已经被点击过，初始值为 <code>false</code>。</p>
<p>然后，在按钮上使用 <code>v-on</code> 指令绑定 <code>click</code> 事件，并在该事件处理方法中判断按钮是否已经被点击过。如果是，则直接返回；否则，将 <code>isClicked</code> 属性设置为 <code>true</code>，表示按钮已经被点击过，并执行需要的操作。</p>
<p>最后，在按钮上使用 <code>v-bind</code> 指令绑定 <code>disabled</code> 属性，根据 <code>isClicked</code> 属性的值来动态设置该属性，实现按钮只能点一次的效果。</p>