用vue写一个简易计算器
要求有加减乘除
代码简洁
代码如下:
html:
<div id="app">
<input type="number" v-model="n.v1" @input="calc()">
<select v-model="n.type" @change="calc()">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="number" v-model="n.v2" @input="calc()">
<button>=</button>
<span>{{n.v3}}</span>
</div>
js:
<script type="text/javascript">
new Vue({
el:"#app",
data:{
n:{
v1:1,
v2:1,
v3:2,
type:"+"
}
},
methods:{
//计算结果
calc(){
//把v3赋值为 v1,type,v2字符串相连
//eval 把字符串当js代码执行一遍(不推荐使用)
this.n.v3 =eval(this.n.v1+this.n.type+"("+this.n.v2+")")
}
}
})
</script>
效果: