无法禁用跨度的点击事件

【问题标题】：Unable to disable click event of a span无法禁用跨度的点击事件
【发布时间】：2020-10-02 12:12:47
【问题描述】：

我正在尝试禁用跨度。我的尝试如下。

<span @click="confirm" disabled="true">click here</span>

但它不会被禁用。我哪里错了，我该如何解决？

【问题讨论】：

disable 不是 <span> 元素的有效 HTML 属性。如果该元素无论如何都是可点击的，为什么不使用<button>？
那么有什么办法可以禁用跨度吗？
pointer-events: none; 如果你不想让它被访问，或者你可以简单地在 confirm() 方法中有一个保护子句，如果按钮应该被禁用，则不会进一步执行代码

标签： vue.js

【解决方案1】：

您可以使用 css 类来禁用跨度。如果你想让它变得动态，只需使用 Class Binding 例如:class="your_variable"

对于类和样式绑定，您可以使用此参考

vuejs.org/v2/guide/class-and-style.html#Object-Syntax Class and Style Bindings

const app = new Vue({
  methods: {
    confirm(){
    alert('hello');
    }
  }
})
app.$mount("#app")

.disable-click{
pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Enable click</h2>
<span v-on:click="confirm()">Click</span>

<h2>Disable click</h2>
<span v-on:click="confirm()" class="disable-click">Disable Click</span>
</div>

【讨论】：

我添加了一些解释