vue.js - 无法禁用跨度的点击事件

Question

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

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

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

标签： vue.js

Answer 1

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

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

vuejs.org/v2/guide/class-and-style.html#Object-Syntax 类和样式绑定

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>