计算器实现：
方法1：使用v-model进行双向绑定。
方法2：使用computed计算属性。
方法3：使用watch侦听属性。
1.定义自定义方法getResult，该方法用来计算表达式的值。
``
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<div id="app">
<!--v-model数据双向绑定 -->
<input id="input" type="number" v-model="num1" @click="getResult" />
<select v-model="opt" @click="getResult">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="number" v-model="num2" @click="getResult"/>
<input type="text" v-model="result" />
</div>
<script >
var vm = new Vue({
el:'#app',
data:{
num1:0,//第一输入框中的数字
num2:0,//第二输入框中的数字
result:null,//计算结果
opt:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
},
methods:{
//计算表达式num1 (+ or - or * or / or %) num2 的值
getResult(){
if(this.opt === '') //未选择运算符时跳过运算
return
var str = this.num1 + this.opt + this.num2;
this.result = eval(str);//使用eval计算表达式
}
},
created:function(){
this.getResult() //如果设定了初值，计算结果
}
})
</script>
2.当有一些数据需要随着其他数据变动而变动时就需要使用computed计算属性。``
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model数据双向绑定 placeholder用于输入框的提示信息-->
<input type="number" v-model="number1" placeholder="请输入数字" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="number" v-model="number2" placeholder="请输入数字"/>
<input type="text" v-model="result" placeholder="计算结果"/>
</div>
<script >
var vm = new Vue({
el:'#app',
data:{
number1:0,//第一输入框中的数字
number2:0,//第二输入框中的数字
opt:''//默认选择的运算符
},
computed:{
result:function(){//函数调用
if(this.opt == '' || this.number1=='' || this.number2 =='') //表达式不完整时跳过运算
return null
return eval(`${this.number1}${this.opt}(${this.number2})`)//使用eval计算表达式的值
}
}
})
</script>
</body>
</html>
3.只需监听当前Vue实例中的数据变化，就会调用当前数据绑定的事件处理方法。
`
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<input type="number" v-model="num1" placeholder="请输入数字" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="number" v-model="num2" placeholder="请输入数字"/>
<input type="text" v-model="result" placeholder="计算结果"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
result:null,
opt:''
},
methods:{
//求出计算结果的方法
com:function(){
//当表达式不完整时停止运算
if(this.opt === '' || this.num1=='' || this.num2==''){
this.result = null
return
}
this.result = eval(`${this.num1}${this.opt}(${this.num2})`)
}
},
watch:{
//如果num1发生改变，下面的函数就会运行
num1:function(){
this.com()
},
//如果num2发生改变，下面的函数就会运行
num2:function(){
this.com()
},
//如果opt发生改变，下面的函数就会运行
opt:function(){
this.com()
}
},
created(){
this.com()
}
})
</script>
` 标签：opt,function,Vue,num1,num2,简易,result,计算器 From： https://www.cnblogs.com/-cjl/p/17280709.html