使用 Vue 数据绑定表达 switch 语句的正确方法 [英] Proper way to express switch statement with Vue data bindings
问题描述
我有一个范围输入的简单用例，只要范围的值发生变化，它就会更改按钮的文本.我正在使用 Vue.js 从一个对象绑定数据，该对象只是存储范围值，然后将其返回到按钮(和计数器，以便于调试).
在下面的小提琴中，当范围值大于 0 时，文本显示为买入"，否则显示为卖出".
小提琴:
我想要做的是根据范围值是正值、负值还是零来显示三个按钮状态.我可以使用 Vue handlebar/mustache 语法来创建一个三元表达式，但我无法弄清楚如何覆盖第三个状态.我需要的是更接近 switch 语句而不是三元，但我似乎无法在 Vue 的文档中找到类似的东西.
- Vue 是否包含用于我不知道的这种逻辑的工具?
- 我是否应该使用在范围更改时触发的自定义方法来处理此问题?
- 我是否只是错误地使用了 Vue 模板?有没有更好的方法来使用属性或其他东西来做到这一点?
HTML
<跨度><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"><按钮>{{ (item.delta > 0) ?买卖" }}</span>JS
var stats = {物品 : {价格 : 10,库存 : 20,战利品:5，增量:0}}var app = new Vue({el: '#app',数据:统计});通常您希望从模板中删除复杂的逻辑.在这种情况下，您需要基于其他一些数据的值，因此这是计算属性的理想用例.
计算:{btnText(){如果 (this.item.delta > 0) 返回购买"如果 (this.item.delta <0) 返回卖出"返回无"}}这里我只使用简单的 if 语句，但如果您想使用 switch，您当然可以.在您的模板中使用如下:
这是一个工作示例.
var stats = {物品 : {价格 : 10,库存 : 20,战利品:5，增量:0}}var app = new Vue({el: '#app',数据:统计，计算:{btnText(){如果 (this.item.delta > 0) 返回购买"如果 (this.item.delta <0) 返回卖出"返回无"}}});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script><div id="应用程序"><跨度><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"><按钮>{{ btnText }}</span>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).
In the following fiddle, when the range value is greater than 0, the text reads "Buy", or else it reads "Sell".
Fiddle: 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.
- 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?
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
var stats = {
item : {
price : 10,
stock : 20,
loot : 5,
delta : 0
}
}
var app = new Vue({
el: '#app',
data: stats
});
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:
<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>
这篇关于使用 Vue 数据绑定表达 switch 语句的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
