VUE课程参考---10、使用v-model实现简单计算器
一、总结
一句话总结：
使用v-model实现简单计算器也就是v-model做双向数据绑定，交互多的页面用vue做双向数据绑定会比较方便
<div id="app"> <input type="text" v-model="n1" @change="calc"> <select v-model="opt" @click="calc"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2" @change="calc"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, opt: '+', result: 0 }, methods: { calc:function () { switch(this.opt){ case "+": this.result=parseInt(this.n1)+parseInt(this.n2); break; case "-": this.result=parseInt(this.n1)-parseInt(this.n2); break; case "*": this.result=parseInt(this.n1)*parseInt(this.n2); break; case "/": this.result=parseInt(this.n1)/parseInt(this.n2); break; } } } }); </script>
二、使用v-model实现简单计算器
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>10、使用v-model实现简单计算器</title> 6 </head> 7 <body> 8 <!-- 9 10 使用v-model实现简单计算器也就是v-model做双向数据绑定，交互多的页面用vue做双向数据绑定会比较方便 11 12 --> 13 <div id="app"> 14 <input type="text" v-model="n1" @change="calc"> 15 <select v-model="opt" @click="calc"> 16 <option value="+">+</option> 17 <option value="-">-</option> 18 <option value="*">*</option> 19 <option value="/">/</option> 20 </select> 21 <input type="text" v-model="n2" @change="calc"> 22 <input type="button" value="=" @click="calc"> 23 <input type="text" v-model="result"> 24 </div> 25 <script src="../js/vue.js"></script> 26 <script> 27 let vm = new Vue({ 28 el: '#app', 29 data: { 30 n1: 0, 31 n2: 0, 32 opt: '+', 33 result: 0 34 }, 35 methods: { 36 calc:function () { 37 switch(this.opt){ 38 case "+": 39 this.result=parseInt(this.n1)+parseInt(this.n2); 40 break; 41 case "-": 42 this.result=parseInt(this.n1)-parseInt(this.n2); 43 break; 44 case "*": 45 this.result=parseInt(this.n1)*parseInt(this.n2); 46 break; 47 case "/": 48 this.result=parseInt(this.n1)/parseInt(this.n2); 49 break; 50 } 51 } 52 } 53 }); 54 </script> 55 </body> 56 </html>
