1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 12 13 </head> 14 15 <body> 16 <div id="app"> 17 <input type="text" v-model="n1"> 18 19 <select v-model="opt"> 20 <option value="+">+</option> 21 <option value="-">-</option> 22 <option value="*">*</option> 23 <option value="/">/</option> 24 </select> 25 26 <input type="text" v-model="n2"> 27 <input type="button" value="=" @click="calc"> 28 <input type="text" v-model="result"> 29 30 </div> 31 32 33 34 35 <script> 36 //创建 Vue 实例，得到 ViewModel 37 var vm = new Vue({ 38 el:‘#app‘, 39 data:{ 40 n1:0, 41 n2:0, 42 result:0, 43 opt:‘+‘ 44 }, 45 methods:{ 46 calc(){//计算器算数的方法 47 //逻辑： 48 /* switch(this.opt){ 49 case ‘+‘: 50 this.result=parseInt(this.n1)+parseInt(this.n2) 51 break; 52 case ‘-‘: 53 this.result=parseInt(this.n1)-parseInt(this.n2) 54 break; 55 case ‘*‘: 56 this.result=parseInt(this.n1)*parseInt(this.n2) 57 break; 58 case ‘/‘: 59 this.result=parseInt(this.n1)/parseInt(this.n2) 60 break; 61 }*/ 62 63 64 //注意：这是投机取巧的方式，正式开发中，尽量少用 65 var codeStr=‘parseInt(this.n1)‘+this.opt+‘parseInt(this.n2)‘ 66 this.result=eval(codeStr) 67 } 68 } 69 }); 70 71 </script> 72 </body> 73 </html>
第二章 Vue快速入门--14 使用v-model实现计算器的案例
原文：https://www.cnblogs.com/songsongblue/p/10988125.html