Vue.js - 根据选择更改数学运算符？

Question

用户可以输入两个值，根据他选择的运算符，这两个值将相加、相减、相除或相乘。

例如：用户输入 45 和 32。如果他选择 + 运算符，结果将是 77。如果他再切换到 * 运算符，结果将是 1440。

这是否可以通过简单的方式来完成，或者我必须使用 v-if 或类似的东西，并分别浏览它们中的每一个？

<select v-model="operator">
   <option value="+">+</option>
   <option value="-">-</option>
   <option value="*">*</option>
   <option value="/">/</option>
</select>

Answer 1

您可以执行以下操作。确保边缘情况，即当运算符为 / 时，input2 不应为 0。

methods: {
   doOperation(input1, input2) 
   {
      switch(this.operator)
      {
         case '+':
            return input1 + input2;

         case '-':
            return input1 - input2;

         case '*':
            return input1 * input2;

         case '/':
            return input1 / input2;
      }
   }
}

Answer 2

环顾四周，我认为这不可能开箱即用，但是从 this answer 工作，您应该能够在 Vue 组件的数据对象中设置一个对象：

var operators = {
    '+': function(a, b) { return a + b },
    '-': function(a, b) { return a - b },
    '*': function(a, b) { return a * b },
    '/': function(a, b) { return a / b },
};

然后根据选择的运算符，假设用户也输入了num1和num2，你也存储在你的Vue数据组件中，你可以设置一个computed属性结果：

result() {
    return this.operators[this.operator](this.num1, this.num2);
}