Vue之双向数据绑定

demo.html

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
 3       xmlns:v-on="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Vue-双向数据绑定</title>
 7     <!--自选版本-->
 8     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
 9     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
10     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11     <!-- 生产环境版本，优化了尺寸和速度 -->
12     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
13 </head>
14 <body>
15 <div id="app">
16     <div>
17         <div>
18             <!--双向数据绑定: 输入的值显示输出在页面上-->
19             <h3>双向数据绑定 input / select / textarea</h3>
20             <label>姓名：</label>
21             <input ref="name" type="text" v-on:keyup="logName"/>
22             <span>{{name}}</span>
23             <label>年龄：</label>
24             <input ref="age" type="text" v-on:keyup.enter="logAge"/>
25             <span>{{age}}</span>
26         </div>
27     </div>
28 
29     <hr>
30     <!--双向数据绑定: 使用model方式实现-->
31     <div>
32         <h3>双向数据绑定(v-model方式实现)</h3>
33         <label>姓名：</label>
34         <input type="text" v-model="name2"/>
35         <span>{{name2}}</span>
36         <label>年龄：</label>
37         <input type="text" v-model="age2"/>
38         <span>{{age2}}</span>
39     </div>
40 
41 </div>
42 <script src="app.js"></script>
43 
44 
45 </body>
46 </html>

 

app.js

 1 var app = new Vue({
 2     el: '#app',
 3     data: {
 4         name: "",
 5         age: "",
 6         name2: "",
 7         age2: "",
 8 
 9     },
10     methods: {
11         logName: function () {
12             console.log("正在输入名字！")
13             this.name = this.$refs.name.value;
14         },
15         logAge: function () {
16             console.log("正在输入年龄！")
17             this.age = this.$refs.age.value;
18         }
19     },
20 })

 

截图：

 

posted @ 2019-02-12 09:57  星瑞  阅读(161)  评论(0)  编辑  收藏  举报