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 })
截图：
