1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <!--v-model数据双向绑定 -->
11 <input id="input" type="number" v-model="num1" @click="getResult" />
12 <select v-model="opt" @click="getResult">
13 <option value ="+">+</option>
14 <option value ="-">-</option>
15 <option value ="*">*</option>
16 <option value ="/">/</option>
17 </select>
18 <input type="number" v-model="num2" @click="getResult"/>
19 <input type="text" v-model="result" />
20 </div>
21 <script >
22 var vm = new Vue({
23 el:'#app',
24 data:{
25 num1:0,//第一输入框中的数字
26 num2:0,//第二输入框中的数字
27 result:null,//计算结果
28 opt:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
29 },
30 methods:{
31 //计算表达式num1 (+ or - or * or / or %) num2 的值
32 getResult(){
33 if(this.opt === '') //未选择运算符时跳过运算
34 return
35 var str = this.num1 + this.opt + this.num2;
36 this.result = eval(str);//使用eval计算表达式
37 }
38 },
39 created:function(){
40 this.getResult() //如果设定了初值，计算结果
41 }
42 })
43 </script>
44 </body>
45 </html>
<!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 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>
</body>
</html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <!--v-model数据双向绑定 placeholder用于输入框的提示信息-->
11 <input type="number" v-model="number1" placeholder="请输入数字" />
12 <select v-model="opt">
13 <option value ="+">+</option>
14 <option value ="-">-</option>
15 <option value ="*">*</option>
16 <option value ="/">/</option>
17 </select>
18 <input type="number" v-model="number2" placeholder="请输入数字"/>
19 <input type="text" v-model="result" placeholder="计算结果"/>
20 </div>
21 <script >
22 var vm = new Vue({
23 el:'#app',
24 data:{
25 number1:0,//第一输入框中的数字
26 number2:0,//第二输入框中的数字
27 opt:''//默认选择的运算符
28 },
29 computed:{
30 result:function(){//函数调用
31 if(this.opt == '' || this.number1=='' || this.number2 =='') //表达式不完整时跳过运算
32 return null
33 return eval(`${this.number1}${this.opt}(${this.number2})`)//使用eval计算表达式的值
34 }
35 }
36 })
37 </script>
38 </body>
39 </html>
依次为普通方法，监听属性。计算属性
标签：opt,function,Vue,num1,num2,简易,result,计算器,com From： https://www.cnblogs.com/-cjl/p/17280651.html