Demo地址
双向绑定有两种方式
- ref
- v-model
ref
这里对一个input标签进行绑定:
<!--通过ref也可以进行双向绑定-->
<input type="text" ref="age" v-on:keyup="logAge">
<span>{{age}}</span>
//在methods我们需要如下操作
methods:{
logAge:function () {
//通过ref进行双向绑定
this.age = this.$refs.age.value;
}
}
v-model
可以用v-model直接绑定属性名
//name表示属性名
<input type="text" v-model="name">
<span>{{name}}</span>
//vue对象中
var app = new Vue({
el:'#app',
data:{
name:'',
age:20,
a:0,
b:0
}
}
注意点
双向绑定主要针对input,select,textarea这几种标签.
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Third Day</title>
<script src="../1/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数据的双向绑定</h1>
<label>姓名:</label>
<!--双向绑定主要针对input,select,textarea几种标签-->
<!--v-model可以实现属性绑定-->
<input type="text" v-model="name">
<span>{{name}}</span>
<label>年龄:</label>
<!--通过ref也可以进行双向绑定-->
<input type="text" ref="age" v-on:keyup="logAge">
<span>{{age}}</span>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:'',
age:20,
a:0,
b:0
},
methods:{
logAge:function () {
//通过ref进行双向绑定
this.age = this.$refs.age.value;
}
}
});
</script>
</body>
</html>
