VUE课程---14、使用v-model实现简单计算器
一、总结
一句话总结：
使用v-model实现简单计算器也就是用v-model指令做双向数据绑定，这样表单数据发生变化时，vue对象就可以自动接收到数据，从而根据这些新数据得到结果。交互多的页面用vue做双向数据绑定会比较方便。
<div id="app"> <input type="text" v-model="n1" @change="calc"> <select v-model="opt" @change="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="ans"> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ n1:0, n2:0, ans:0, opt:'+' }, methods:{ calc(){ switch (this.opt) { case "+": this.ans=parseInt(this.n1)+parseInt(this.n2); break; case "-": this.ans=parseInt(this.n1)-parseInt(this.n2); break; case "*": this.ans=parseInt(this.n1)*parseInt(this.n2); break; case "/": this.ans=parseInt(this.n1)/parseInt(this.n2); break; } } } }); </script>
二、使用v-model实现简单计算器
博客对应课程的视频位置：14、使用v-model实现简单计算器
https://www.fanrenyi.com/video/26/231
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用v-model指令实现简易计算器</title> 6 </head> 7 <body> 8 <div id="app"> 9 <input type="text" v-model="n1" @change="calc"> 10 <select v-model="opt" @change="calc"> 11 <option value="+">+</option> 12 <option value="-">-</option> 13 <option value="*">*</option> 14 <option value="/">/</option> 15 </select> 16 <input type="text" v-model="n2" @change="calc"> 17 <input type="button" value="=" @click="calc"> 18 <input type="text" v-model="ans"> 19 </div> 20 <script src="../js/vue.js"></script> 21 <script> 22 new Vue({ 23 el:'#app', //element 24 data:{ 25 n1:0, 26 n2:0, 27 ans:0, 28 opt:'+' 29 }, 30 methods:{ 31 calc(){ 32 switch (this.opt) { 33 case "+": 34 this.ans=parseInt(this.n1)+parseInt(this.n2); 35 break; 36 case "-": 37 this.ans=parseInt(this.n1)-parseInt(this.n2); 38 break; 39 case "*": 40 this.ans=parseInt(this.n1)*parseInt(this.n2); 41 break; 42 case "/": 43 this.ans=parseInt(this.n1)/parseInt(this.n2); 44 break; 45 } 46 } 47 } 48 }); 49 </script> 50 </body> 51 </html>
