022 V 动态绑定数据 & v-model修饰符
本帖最后由 不二如是 于 2018-9-22 10:20 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了单选、复选、选项列表,本次来学习如何动态绑定数据。
在实际开发中,往往需要绑定一个动态的数据,这时就可以用v-bind来实现。
我们还是通过上面的三个例子依次来演示。
单选按钮,创建div:
<div id="myApp">
<input type="radio" v-model="chosed" v-bind:value="value">
<p>chosed:{{chosed}}</p>
<p>value:{{value}}</p>
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
chosed:false,
value:333
}
})
</script>
在选中时,app.chosed == app.value,值都是333。
复选框有多种状态,创建div:
<div id="myApp">
<input type="checkbox" v-model="chosed" v-bind:true-value="v1" v-bind:false-value="v2">
<p>chosed:{{chosed}}</p>
<p>v1:{{v1}}</p>
<p>v2:{{v2}}</p>
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
chosed:false,
v1:'选中',
v2:'未选中'
}
})
</script>
勾选时,app.chosed == app.v1,即选中。
未勾选时,app.chosed == app.v2,即未选中。
选择列表就更简单些,创建div:
<div id="myApp">
<select v-model="selected">
<option v-bind:value="{number:333}">333</option>
</select>
{{selected.number}}
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
selected:''
}
})
</script>
当选中时,app.selected是一个Object,所以app.selected.number == 333。
v-model修饰符
v-model有自己的修饰符,用于控制数据同步的时机。
主要介绍三个常用的:.lazy、.number 、.trim
在输入框中,v-model默认是在input事件中同步输入框的数据,使用.lazy会转变为在change事件中同步。
创建div:
<div id="myApp">
<input type="text" v-model.lazy="message">
<p>{{message}}</p>
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
message:''
}
})
</script>
message并不是实时改变,而是在失去焦点或者回车时才更新。
使用.number可以将输入转换为Number类型,否则即使输入的是数字,类型依旧是String。
在数字输入框中很常用,创建div:
<div id="myApp">
<input type="number" v-model.number="message">
<p>{{message}}</p>
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
message:333
}
})
</script>
输入类型是NUmber而不是String。
.trim可以自动过滤输入的首尾空格,创建div:
<div id="myApp">
<input type="text" v-model.trim="message">
<p>{{message}}</p>
</div>
创建Vue实例:
<script>
var app = new Vue({
el:"#myApp",
data:{
message:''
}
})
</script>
课后作业
1、如果需要动态绑定数据,使用v-model还是v-bind?
2、补充代码实现v-bind绑定value,v-model绑定chosed:
<input type="radio" v-model=? ?="value">
3、v-model的修饰符用来干什么?
4、设置为v-model.lazy后目标元素会实时更新?(T/F)
5、如果需要过滤首尾空格使用哪种修饰符
答案:
**** Hidden Message *****
如果有收获,别忘了评分{:10_281:} :
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油,如果喜欢Vue,请订阅 专辑(传送门)(不喜欢更要订阅{:10_297:} )
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.v-bind
2.v-model="chosed" v-bind:value="value"
3.控制同步数据的时机
4.F
5. trim 0 1
页:
[1]