Javascript 使用Vue数据绑定表达switch语句的正确方法

我有一个简单的范围输入用例，每当范围的值改变时，它就会改变按钮的文本。我正在使用Vue.js绑定一个对象中的数据，该对象只存储范围值，并将其返回到按钮和计数器，以便于调试

在下面的提琴中，当范围值大于0时，文本显示为Buy，否则显示为Sell

小提琴：

我想做的是根据范围值是正、负还是零来显示三种按钮状态。我可以使用Vue handlebar/mustache语法创建一个三元表达式，但我不知道如何覆盖第三种状态。我需要的是更接近于switch语句而不是三元语句，但在Vue的文档中似乎找不到类似的语句

Vue是否包含我不知道的用于此类逻辑的工具？ 我应该用一个在范围改变时触发的自定义方法来处理这个问题吗？ 我只是错误地使用了Vue模板吗？有没有更好的方法用属性或其他什么来实现这一点？ HTML

---

通常，您希望从模板中删除复杂的逻辑。在这种情况下，您需要一个基于其他数据的值，因此这是计算属性的理想用例

computed:{
  btnText(){
    if (this.item.delta > 0) return "Buy"
    if (this.item.delta < 0) return "Sell"
    return "Nothing"
  }
}

这里我只使用简单的if语句，但是如果你想使用开关，你当然可以。在模板中使用如下内容：

<button>
  {{ btnText }}
</button>

下面是一个工作示例

变量统计={ 项目：{ 价格:10,， 股票：20， 战利品：5件， 增量：0 } } var app=新的Vue{ el:“应用程序”， 数据：统计数据， 计算：{ btnText{ 如果this.item.delta>0返回购买 如果this.item.delta<0，则返回销售 一无所获 } } }; {{item.delta}} {{btnText}}

---

谢谢，这正是我想要的行为。这个解决方案就是我在说自定义方法时所说的，它肯定会在我的产品代码中起作用，我只是不知道HTML中是否有其他操作符或聪明的技巧来做这种事情，因为我希望尽可能避免编写太多的函数。@Dpeif您可以扩展您的三元函数。item.delta>0？购买：item.delta==0？什么都不做：卖出并得到同样的结果。但是嵌套的三元组是阅读时的一大难题。写一个计算过的程序几乎总是比较好的。很高兴知道！我会记住这一点，以防它使任何用例更容易处理。

computed:{
  btnText(){
    if (this.item.delta > 0) return "Buy"
    if (this.item.delta < 0) return "Sell"
    return "Nothing"
  }
}

<button>
  {{ btnText }}
</button>