javascript - Vue.js 中的内联反转 bool 值 @click

Question

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

我尝试过的:

<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

我认为可以不用任何方法

添加一个点击事件来反转 bool 变量的值。像这样:

@click="showExtra = !showExtra"

在您的脚本数据中:

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