双向数据绑定:一定要有一个输入的地方,一定要有一个输出的地方
//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里面的属性值,这里一开始默认为空,所以为空,当改变也跟着改变。