使用 Vue 将字符串转换为数学运算

如何解决使用 Vue 将字符串转换为数学运算

我正在用 Vue 构建简单的计算器，我不知道如何将字符串转换为数学运算。我已经有了字符串构建代码。

<template>
  <div>
    <input type="number" placeholder="number" v-model="number">
    <button @click = "addToOperation('+')">+</button>
    <button @click = "addToOperation('-')">-</button>
    <button @click = "addToOperation('*')">*</button>
    <button @click = "addToOperation('/')">/</button>
  </div>
</template>

<script>

export default {
    data(){
      return{
        number: '',operation: ''
      }
    },methods:{
        addToOperation(sign){
          this.operation += this.number + sign 
        }
    }
}

</script>

先谢谢你:)

解决方法

我知道可以通过三种方式来实现这一目标：

第一种也是最坏的方法：

var result;
eval("result = calculation");

请不要使用它，因为 eval 是邪恶的。它将字符串评估为代码并针对您的站点安全创建漏洞。我使用它的唯一方法是当它是一个没有人可以访问的个人网站时。

第二种选择：

创建一个函数，通过运算符拆分字符串，然后执行数学运算。如果计算器最终不会太复杂，我会这样做。

第三个选项：

不要添加运算符 - 向某种查询添加数学操作。当你想计算这个时。只需通过查询。注意数学顺序！

这是我目前想到的 3 种方法，希望能帮到我
ShadowLp174

,

我建议您为每个操作制定单独的方法。它可以更清晰地理解代码，而且您不会有太多额外的代码：

<button @click = "add()">+</button>
<button @click = "subtract()">-</button>
<button @click = "multiply()">*</button>
<button @click = "divide()">/</button>