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

对于一个简单的演示，我想反转在Vue.js实例的data属性内定义的 bool(boolean) 值。

我试过的

<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"，这似乎是目前最简洁的工作版本。

最佳答案

我认为没有任何methods也是可能的

添加一个Click事件以反转 bool(boolean) 变量的值。像这样:

@click="showExtra = !showExtra"

在脚本数据中:

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