javascript 使用 Vue 数据绑定表达 switch 语句的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46980269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper way to express switch statement with Vue data bindings
提问by Dpeif
I have a simple use case for a range input that changes a button's text whenever the range's value changes. I'm using Vue.js to bind data from an object that is simply storing the range value, and spitting it back out to the button (and the counter, for easier debugging).
我有一个范围输入的简单用例，只要范围的值发生变化，它就会更改按钮的文本。我正在使用 Vue.js 绑定来自一个对象的数据，该对象只是存储范围值，并将其返回到按钮（和计数器，以便于调试）。
In the following fiddle, when the range value is greater than 0, the text reads "Buy", or else it reads "Sell".
在下面的小提琴中，当范围值大于 0 时，文本显示为“Buy”，否则显示为“Sell”。
Fiddle: http://jsfiddle.net/svwa79pe/1/
小提琴：http: //jsfiddle.net/svwa79pe/1/
What I want to do is show three button states depending on whether the range value is positive, negative, or zero. I can use Vue handlebar / mustache syntax to create a ternary expression, but I can't figure out how cover the third state. What I need is closer to a switch statement than ternary, but I can't seem to find an analog to that within Vue's documentation.
我想要做的是根据范围值是正、负还是零显示三个按钮状态。我可以使用 Vue handlebar / mustache 语法来创建一个三元表达式，但我无法弄清楚如何覆盖第三个状态。我需要的是更接近 switch 语句而不是三元，但我似乎无法在 Vue 的文档中找到类似的东西。
- Does Vue contain a tool for this kind of logic that I don't know about?
- Should I just handle this with a custom method that fires on the range change?
- Am I just using the Vue template incorrectly? Is there a better way to do this with attributes or something?
- Vue 是否包含我不知道的这种逻辑的工具？
- 我是否应该使用在范围更改时触发的自定义方法来处理此问题？
- 我只是错误地使用了 Vue 模板吗？有没有更好的方法来使用属性或其他东西来做到这一点？
HTML
HTML
<div id="app">
<span>
<button disabled="true">{{ item.delta }}</button>
</span>
<input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot">
<span class="exchange">
<button>
{{ (item.delta > 0) ? "Buy" : "Sell" }}
</button>
</span>
</div>
JS
JS
var stats = {
item : {
price : 10,
stock : 20,
loot : 5,
delta : 0
}
}
var app = new Vue({
el: '#app',
data: stats
});
回答by Bert
Typically you want to remove complex logic from the template. In this case you want a value based on some other data so this is an ideal use case for a computed property.
通常，您希望从模板中删除复杂的逻辑。在这种情况下，您需要基于某些其他数据的值，因此这是计算属性的理想用例。
computed:{
btnText(){
if (this.item.delta > 0) return "Buy"
if (this.item.delta < 0) return "Sell"
return "Nothing"
}
}
Here I'm just using simple if statements, but if you wanted to use a switch you certainly could. Used in your template like this:
这里我只使用简单的 if 语句，但是如果您想使用 switch，您当然可以。在您的模板中使用，如下所示：
<button>
{{ btnText }}
</button>
Here is a working example.
这是一个工作示例。
var stats = {
item : {
price : 10,
stock : 20,
loot : 5,
delta : 0
}
}
var app = new Vue({
el: '#app',
data: stats,
computed:{
btnText(){
if (this.item.delta > 0) return "Buy"
if (this.item.delta < 0) return "Sell"
return "Nothing"
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
<span>
<button disabled="true">{{ item.delta }}</button>
</span>
<input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot">
<span class="exchange">
<button>
{{ btnText }}
</button>
</span>
</div>