问题描述
我正在用 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>