1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>简易计算器的使用</title> 8 <script src="../js/vue.js"></script> 9 </head> 10 11 <body> 12 13 <div id="app"> 14 <input type="text" v-model="n1"> 15 <select v-model='opt'> 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"> 22 <button @click="clac">=</button> 23 <input type="text" v-model="result"> 24 25 </div> 26 <script> 27 var vm = new Vue({ 28 el: '#app', 29 data: { 30 n1: 0, 31 n2: 0, 32 opt: '+', 33 result: 0, 34 35 }, 36 methods: { 37 clac() { 38 // switch (this.opt) { 39 // case '+': 40 // this.result = parseInt(this.n1) + parseInt(this.n2) 41 // break; 42 // case '-': 43 // this.result = parseInt(this.n1) - parseInt(this.n2) 44 // break; 45 // case '*': 46 // this.result = parseInt(this.n1) * parseInt(this.n2) 47 // break; 48 // case '/': 49 // this.result = parseInt(this.n1) / parseInt(this.n2) 50 // break; 51 // } 52 let setCode='parseInt(this.n1)'+ this.opt+'parseInt(this.n2)' 53 this.result=eval(setCode) 54 } 55 } 56 }) 57 </script> 58 </body> 59 60 </html>