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>
