第二章 Vue快速入门--14 使用v-model实现计算器的案例

 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>