在Vue.js中内联反转布尔@click

对于一个简单的演示，我想反转在vue.js实例的data属性中定义的布尔值。
我试过的：

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

和

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

我想避免编写单独的方法，或者在我的v-on中有类似的东西：单击“：

spanVisible ? !spanVisible : !spanVisible

，因为它只是多余的。
所以现在我的问题主要是：为什么直接反转不起作用？我还有什么其他的办法让它简洁明了呢？
编辑：
我现在发现的最短的可能变化是使用

spanVisible = !spanVisible

，但不确定这是否是最简洁的版本。
解决方案：
我找到的最佳解决方案是@sombriks在评论中提出的：
使用

@click="!spanVisible"

只计算

spanVisible

的反向值，但不替换它的值，要为它分配新值，可以使用

@click="spanVisible = !spanVisible"

，这似乎是目前最简洁的工作版本。

最佳答案：

spanVisible