在Vue.js中内联反转boolean @click

Question

对于一个简单的演示,我想反转我在我的Vue.js实例的数据属性中定义的布尔值.

我尝试了什么:

<button @click="!spanVisible" type="button">Toggle</button>

和

<button @click="(!spanVisible)" type="button">Toggle</button>

我想避免在我的v-on中写一个单独的方法或者有类似的东西:click ="":spanVisible ? !spanVisible : !spanVisible因为它只是多余的.

所以现在我的问题主要是:为什么直接反转不起作用？还有什么其他的可能性来保持简短？

编辑:

我现在发现的最短的变化是使用spanVisible = !spanVisible,但不确定这是否是最简洁的版本.

解:

我发现的最佳解决方案是@Sombriks在评论中提出的:使用@click="!spanVisible"仅评估反转的值,spanVisible但不替换它的值,为它分配一个新值,你可以使用@click="spanVisible = !spanVisible",这似乎是最简洁的工作版本现在.

Answer 1

我认为可以不用任何 methods

添加一个 Click 事件来反转布尔变量的值。像这样：

@click="showExtra = !showExtra"

在您的脚本数据中：

<script>
  export default {
  return {
    data() {
       showExtra: false
    }
 }
}
</script>

Answer 2

你做错了。 <button v-on:click="toggle" type="button">Toggle</button>

在你的脚本部分：

data () {
    return {
        spanVisible: true
    }
},
methods: {
    toggle () {
        this.spanVisible = !this.spanVisible
    }
}

请注意，data如果您使用的是 Vue 组件，则以这种方式声明。如果您在文件脚本中使用，您将跳过return