计算器功能:
1.加减乘除模可以随意切换
使用表单元素< seclect >
2.当输入框中数字改变时实时得出运算结果
方法1：v-model绑定input框的值，绑定input键盘按下和鼠标点击时触发自定义方法getResult，该方法用来计算表达式的值。
方法2：使用computed计算属性
方法3：使用watch侦听属性
3.可以使用上下按钮调节数字大小
使用input 属性 type=“number”
4.结果框禁止输入
input添加事件οnfοcus=“this.blur()”
一、普通方法
通过methods中自定义方法，然后在input表单上通过v-on绑定keyup键盘事件，实现实时更新计算结果的功能。
1 <!DOCTYPE html1>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <input id="input" type="number" v-model="num1" @keyup="getResult" @click="getResult" />
11 <select v-model="selected" @click="getResult">
12 <option value ="">请选择</option>
13 <option value ="+">+</option>
14 <option value ="-">-</option>
15 <option value ="*">*</option>
16 <option value ="/">/</option>
17 <option value ="%">%</option>
18 </select>
19 <input type="number" v-model="num2" @keyup="getResult" @click="getResult"/>
20 <input type="text" v-model="result" onfocus="this.blur()" />
21 </div>
22 <script type="text/javascript">
23 var vm = new Vue({
24 el:'#app',
25 data:{
26 num1:0,
27 num2:0,
28 result:null,
29 selected:''
30 },
31 methods:{
32
33 getResult(){
34 if(this.selected === '')
35 return
36 var str = this.num1 + this.selected + this.num2;
37 this.result = eval(str);
38 }
39 },
40 created:function(){
41 this.getResult()
42 }
43 })
44 </script>
45 </body>
46 </html>
二、通过computed计算属性
将计算结果设定为一个computed计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="num1" placeholder="请输入数字" />
<select v-model="selected">
<option value ="">请选择</option>
<option value ="+">+</option>
<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" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
selected:''
},
computed:{
result:function(){
if(this.selected === '' || this.num1=='' || this.num2 =='')
return null
return eval(`${this.num1}${this.selected}(${this.num2})`)
}
}
})
</script>
</body>
</html>
三、使用watch侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
每当侦听的属性发生改变时，vue会执行该属性对应的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="number" v-model="num1" placeholder="请输入数字" />
<select v-model="selected">
<option value ="">请选择</option>
<option value ="+">+</option>
<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" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
result:null,
selected:''
},
methods:{
com:function(){
if(this.selected === '' || this.num1=='' || this.num2==''){
this.result = null
return
}
this.result = eval(`${this.num1}${this.selected}(${this.num2})`)
}
},
watch:{
num1:function(){
this.com()
},
num2:function(){
this.com()
},
selected:function(){
this.com()
}
},
created(){
this.com()
}
})
</script>
</body>
</html>
总结：
1.普通方法：主要就是使用methods中自定义方法进行调用接收。
2.计算属性：主要就是计算完数据要有返回值，特别注意计算属性的函数方法有返回值，需要使用双括号。
3.监听器：主要就是监听数据变化，特别注意监视同一个东西多个属性时，把多个属性数据放在同一个数组里面进行监听更加方便。
标签：function,VUE,num1,num2,selected,result,监听器,计算器,属性 From： https://www.cnblogs.com/xianyu123/p/17280519.html