v-model的双向绑定事件简易计算器

通过一段代码来理解v-model

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>v-modeld的使用</title>
 7     <script src="./lib/vue.js"></script>
 8 </head>
 9 <body>
10     <div id="app">
11         <h4>{{ msg }}</h4>
12         <input type="text" style="width: 360px;" v-model="msg">
13     </div>
14     <!-- v-bind 只能实现数据的单项绑定，从M自动绑定到V ，无法实现数据的双向绑定 -->
15     <!-- <input type="text" style="width: 360px;" v-bind:value= "msg"> -->
16     <!-- 使用v-model能够实现数据的双向绑定，即我下面改了数据上面数据也会跟着变换 -->
17     <!-- 特别注意v-model只能用于表单元素中 -->
18     <script>
19         //创建Vue实列，得到ViewModel
20         var vm = new Vue({
21             el: '#app',
22             data:{
23                 msg: '我爱学习，热爱代码，喜欢新鲜的事务'
24             },
25             methods:{
26 
27             }
28         });
29 
30     </script>
31     
32 </body>
33 </html>

简单的做一个计算器来深入理解双向绑定事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>简单计算器</title>
 7     <script src="./lib/vue.js"></script>
 8 
 9 
10     
11 </head>
12 <body>
13     <div id="app">
14         <input type="text" v-model="n1">
15         <select v-model="opt" style="color: rgb(0, 0, 0);">
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         <input type="button" value="="  @click="calc">
23         <input type="text" v-model="result">
24     </div>
25 
26 
27     <script>
28         //创建Vue实列，得到ViewModel
29 
30         var vm = new Vue({
31             el:'#app',
32             data:{
33                 n1: 0,
34                 n2: 0,
35                 result: 0,
36                 opt: '+'
37         
38             },
39             methods: {
40              calc() { // 计算器算数的方法  
41                  // 逻辑：
42            switch (this.opt) {
43             case '+':
44               this.result = parseInt(this.n1) + parseInt(this.n2)
45               break;
46             case '-':
47               this.result = parseInt(this.n1) - parseInt(this.n2)
48               break;
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                         } 
56                         //还有一个比较简单的方法,通过this.opt的方法引用opt中的函数
57                        // var codeStr = 'parseInt(this.ni)' + this.opt+ 'parseInt(this.n2)'
58                         // this.result = eval(codeStr)
59                 }
60                 
61             }
62         })
63     </script>
64     
65 </body>
66 </html>

 

posted @ 2020-03-20 17:43  社会主义核心价值观  阅读(269)  评论(0)    收藏  举报
Live2D