Vue.js 中的内联反转布尔值 @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" ，这似乎是目前最简洁的工作版本。

原文由 Ivan Sieder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为可以不使用任何 methods

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

 @click="showExtra = !showExtra"

在您的脚本数据中：

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

原文由 Mr. Perfectionist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你这样做是不对的。 <button v-on:click="toggle" type="button">Toggle</button>

在你的脚本部分：

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

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

原文由 Marek Urbanowicz 发布，翻译遵循 CC BY-SA 4.0 许可协议