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>
依次为普通方法，监听属性。计算属性