一，使用表达式实现计算器：
两个<input>输入框,使用v-if对表达式的运算符进行切换。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><input type="text" v-model.number="num1"/><select v-model="opt"><option>+</option><option>-</option><option>*</option><option>/</option></select><input type="text" v-model.number="num2" /><br /><div><p v-if="opt=='+'">结果：{{num1+num2}}</p><p v-if="opt=='-'">结果：{{num1-num2}}</p><p v-if="opt=='*'">结果：{{num1*num2}}</p><p v-if="opt=='/'">结果：{{num1/num2}}</p></div></div></body><script type="text/javascript">var vm = new Vue({el:"#app",data:{num1:0,num2:0,opt:"*"}})</script></html>二，使用计算属性（computed）实现简易计算器
HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。
计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。当用户更改输入元素中的值时，计算属性将自动重新计算结果。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>computed</title><script src="js/vue.js"></script></head><body><div id="app"><input id="input" type="text" v-model="n1"/> <select v-model="opt"> <option value ="+">+</option><option value ="-">-</option><option value ="*">*</option><option value ="/">/</option> </select><input type="text" v-model="n2"/><input type="text" v-model="result"/></div><script type="text/javascript">var vm = new Vue({el:'#app',data:{n1:0,n2:0,opt:'+'},computed:{result(){switch (this.opt) {case '+':return Number(this.n1) + Number(this.n2);break;case '-':return Number(this.n1) - Number(this.n2);break;case '*':return Number(this.n1) * Number(this.n2);break;case '/':return Number(this.n1) / Number(this.n2);break;}}}})</script></body></html>三，使用方法（methods）实现简易的计算器
button1（），当按钮被点击时会执行该函数。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body> <div id="app"> <input type="text" v-model.number="num1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model.number="num2"> <button @click="button1">计算</button> <input type="text" v-model.number="num3"> </div></body> <script> var vm = new Vue({ el:"#app", data:{ num1:0, num2:0, num3:0, opt:'+', }, methods:{ button1(){ switch(this.opt){ case '+': this.num3=this.num1 + this.num2; break; case '-': this.num3=this.num1 - this.num2; break; case '*': this.num3=this.num1 * this.num2; break; case '/': this.num3=this.num1 / this.num2; break; } } } }); </script></html>四，使用侦听器（watch）实现计算器
使用Vue.js的watch属性来监视数据的变化。 定义了三个监视器函数，分别监视n1，n2和opt属性。每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值
<!DOCTYPE html><html><head><meta charset="utf-8"><title>watch</title><script src="js/vue.js"></script></head><body><div id="app"><input id="input" type="text" v-model="n1" /> <select v-model="opt"> <option value ="+">+</option><option value ="-">-</option><option value ="*">*</option><option value ="/">/</option> </select><input type="text" v-model="n2" /><input type="text" v-model="result" /></div><script type="text/javascript">var vm = new Vue({el:'#app',data:{n1:0,n2:0,result:null,opt:'+'},methods:{watch1(){switch (this.opt) {case '+':this.result = Number(this.n1) + Number(this.n2);break;case '-':this.result = Number(this.n1) - Number(this.n2);break;case '*':this.result = Number(this.n1) * Number(this.n2);break;case '/':this.result = Number(this.n1) / Number(this.n2);break;}}},watch:{n1:function(){this.watch1()},n2:function(){this.watch1()},opt:function(){this.watch1()}},created(){this.watch1()}})</script></body></html>