Inline反转布尔@vlick.js

对于一个简单的演示，我想颠倒我的Vue.js实例的data属性中定义的布尔值。Inline反转布尔@vlick.js

我的尝试：

<button v-on:click="!spanVisible" type="button">Toggle</button>

和

<button v-on:click="(!spanVisible)" type="button">Toggle</button>

我想避免或者写一个单独的方法或有这样的事情我里面V系列：点击=“”：spanVisible ? !spanVisible : !spanVisible因为它只是多余的。

所以现在我的问题主要是：为什么不直接反转工作？我还有什么其他可能性使它简单而简洁？

编辑：

最短的变化，我发现现在的问题是使用spanVisible = !spanVisible，但不知道这是可用的最简洁的版本。

SOLUTION：

我找到了意见建议由@Sombriks最好的解决办法：使用v-on:click="!spanVisible" 只评估的spanVisible的反转值，但不交它的价值，分配一个新值它可以使用v-on:click="spanVisible = !spanVisible"，这似乎是目前最简洁的工作版本。

来源

2016-12-16 Ivan Sieder

你试过'！（spanVisible）'？ – iHasCodeForU

by just doing！spanVisible你没有改变价值，只是评估它。 x =！x是那里的方式，它在angular1.x系列中也是一个有效的习惯用法。 – Sombriks

@iHasCodeForU是的，这就是我上面提到的，那是行不通的。 –

MVVM或MVC框架的关键点是模型驱动的。 spanVisible是您的模型的一个属性。所以你需要在每个处理程序中直接更新它的值。

来源

2016-12-16 07:46:27 jiajianrong

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

在脚本的一部分：如果您使用Vue的组件

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

注意data声明这种方式。如果你正在使用文件脚本，你会跳过return

来源

2016-12-16 08:16:26

Actuelly，@Sombriks在评论中提出的解决方案是我正在寻找的解决方案，我需要一个简洁的解决方案。你的工作（如果你在数据对象之后加一个逗号）。那一个（来自@Sombriks）也是完全有效的，因为它只是一个赋值表达式。（只要纠正了缺失的逗号，将删除downvote） –

我没有看到任何缺少逗号... –

那么，你现在批准我的编辑，因为它似乎，我已经添加了逗号;）以前，还有一个缺少的逗号。见http://stackoverflow.com/posts/41179971/revisions –

Inline反转布尔@vlick.js

回答

相关问题