一,同普通方法实现简易计算器
首先来看看用普通方法的全部代码以及实现的简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用普通方法实现简易计算器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--当键盘按下或者鼠标点击时触发事件-->
<input type="number" v-model="number1" @click="getResult" placeholder="请输入的一个数字"/>
<select v-model="moren" @click="getResult">
<option value ="">请选择</option>
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="number" v-model="number2" @click="getResult" placeholder="请输入第二个数字"/>
<input type="text" v-model="result" onfocus="this.blur()" placeholder="最终结果"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
number1:"",//
number2:"",//
result:null,//计算结果
moren:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
},
methods:{
//计算表达式number1 (+ or - or * or / or %) number2 的值
getResult(){
if(this.moren === '') //未选择运算符时跳过运算
return
var str = this.number1 + this.moren + this.number2;//拼接表达式
this.result = eval(str);//使用eval计算表达式的值
}
},
created:function(){
this.getResult() //如果设定了初值,计算该表达式的结果
}
})
</script>
</body>
</html>
1.其中<<input type="number>>是用来调节数字值的大小的
2.<<input οnfοcus="this.blur()">>是禁止在“最终结果框”输入的
3. <<select>>表单元素 作用是可以使你在加减乘除里面随便切换
4.<<v-model>>双向绑定 v-model绑定input框的值,绑定input键盘按下和鼠标点击时触发自定义方法moren,该方法用来计算表达式的值。
二,用watch侦听属性实现简易计算器
vue
中提供了watch
方法,可以监听data
内的某些数据的变动,触发相应的方法。
watch的使用
首先确认 watch是一个对象,一定要当成对象来用。对象就有键,有值。
键:就是你要监控的那个变量。比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值:1.可以是函数:就是当你监控的变量变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
2.值也可以是函数名:不过这个函数名要用单引号来包裹。
来看看用watch侦听属性全部代码以及实现的简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用watch侦听属性实现简易计算器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="number" v-model="number1" placeholder="请输入第一个数字" />
<select v-model="moren">
<option value ="">请选择</option>
<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" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
number1:"",
number2:"",
result:null,
moren:''
},
methods:{
//求出计算结果的方法
calculation:function(){
//当表达式不完整时停止运算
if(this.moren === '' || this.number1=='' || this.number2==''){
this.result = null
return
}
this.result = eval(`${this.number1}${this.moren}(${this.number2})`)
}
},
watch:{
//如果number1发生改变,下面的函数就会运行
number1:function(){
this.calculation()
},
//如果number2发生改变,下面的函数就会运行
number2:function(){
this.calculation()
},
//如果moren发生改变,下面的函数就会运行
moren:function(){
this.calculation()
}
},
created(){
this.calculation()
}
})
</script>
</body>
</html>
watch侦听属性方法总结:
优点:数据变化时执行异步或开销较大的操作时,这个方式是最有用的
缺点:当监测对象非常多的时候 代码量就会非常大 代码冗余
三,用计算属性方法实现简易计算器
用计算属性方法的全部代码以及实现的计算器
将计算结果设定为一个computed计算属性,该属性与两个表单中的数字相关联,每当数字发生改变自动计算出结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用计算方法实现简易计算器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="number1" placeholder="请输入第一个数字" />
<select v-model="moren">
<option value ="">请选择</option>
<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" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
number1:"",//第一输入框中的数字
number2:"",//第二输入框中的数字
moren:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
},
computed:{
result:function(){
if(this.moren === '' || this.number1=='' || this.number2 =='') //表达式不完整时跳过运算
return null
return eval(`${this.number1}${this.moren}(${this.number2})`)//使用eval和模板字符串计算表达式的值
}
}
})
</script>
</body>
</html>
用计算属性方法的好处就是在有大量的对象时使用 将会非常的方便 代码看起来非常的简洁 正好解决了watch侦听属性方法对象多时的一个问题