当前位置 博文首页 > IT13333的博客：vue项目中实现计算器
//静态页面 template里面的内容
<div id='app'>
<input type="text" v-model:value="input1">
<select name="" id="" v-model:value="opration">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model:value="input2">
<button @click="calc">=</button>
<input type="text" v-model:value="input3">
</div>
```
script里面
```
data: {
input1:0,
input2:0,
input3:0,
opration:"+"
},
methods:{
calc(){
console.log(this.input1,this.input2,this.input3,this.opration);
if (this.opration=="+") {
// 注意事项： 加号的时候回出现 字符串拼接 所以 需要转换成数字类型
this.input3=Number(this.input1)+Number(this.input2)
}else if(this.opration=="-") {
this.input3=this.input1-this.input2
}else if(this.opration=="*") {
this.input3=this.input1*this.input2
}else if(this.opration=="/") {
this.input3=this.input1/this.input2
}
}
}
效果图
