Vue 实现按钮只可点击一次的简单方法

<template>
  <div>
    <button v-once ref='btn' @click='handleClick'>点击一次</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$refs.btn.disabled = true;
    }
  }
}
</script>
<h2>使用 Vue 的 v-once 指令实现按钮只可点击一次的效果</h2>
<p>使用 Vue 的 <code>v-once</code> 指令可以轻松实现按钮只可点击一次的效果。<code>v-once</code> 指令会使元素只渲染一次，之后不再更新。</p>
<p><strong>步骤：</strong></p>
<ol>
<li>在按钮上添加 <code>v-once</code> 指令：</li>
</ol>
<pre><code class="language-html">&lt;button v-once @click='handleClick'&gt;点击一次&lt;/button&gt;
</code></pre>
<ol start="2">
<li>在 Vue 实例中定义 <code>handleClick</code> 方法，使用 <code>$refs</code> 获取按钮元素并将其禁用：</li>
</ol>
<pre><code class="language-javascript">methods: {
  handleClick() {
    this.$refs.btn.disabled = true;
  }
}
</code></pre>
<p><strong>完整示例代码：</strong></p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;button v-once ref='btn' @click='handleClick'&gt;点击一次&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  methods: {
    handleClick() {
      this.$refs.btn.disabled = true;
    }
  }
}
&lt;/script&gt;
</code></pre>
<p>通过以上步骤，即可实现按钮只可点击一次的效果。</p>