双向数据绑定：一定要有一个输入的地方，一定要有一个输出的地方
//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="vue-app"> <label>姓名：</label> <input ref="name" type="text" @keyup="logname"> {{ name }} <br/> <label>年龄：</label> <input type="text" v-model="year"> {{ year }} <br/> </div> <script src="app.js"></script> </body>
//app.js
new Vue({
el:"#vue-app",
data:
{
name:"",
year:"",
},
methods:
{
logname:function()
{
this.name=this.$refs.name.value;
},
}
});第一种方法的ref，相当于php中设定name，然后提交表单的传值，这里的ref的名字就是js中data的属性，所传值用
this.name=this.$refs.name.value;
来接受值，然后呈现
第二种方法，v-model，v-model自动接受data里面的属性值，这里一开始默认为空，所以为空，当改变也跟着改变。