鱼C论坛

 找回密码
 立即注册
查看: 1962|回复: 3

[庖丁解牛] 022 V 动态绑定数据 & v-model修饰符

[复制链接]
发表于 2018-9-21 15:35:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-9-22 10:20 编辑


                               
登录/注册后可看大图


上一讲我们搞定了单选、复选、选项列表,本次来学习如何动态绑定数据

在实际开发中,往往需要绑定一个动态的数据,这时就可以用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>
Sep-21-2018 16-10-35.gif


在选中时,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>
Sep-21-2018 16-18-10.gif


勾选时,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>
Sep-21-2018 16-38-18.gif


当选中时,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>
Sep-22-2018 10-13-05.gif


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>
Snip20180922_24.png


输入类型是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>
Sep-22-2018 10-19-09.gif





课后作业


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、如果需要过滤首尾空格使用哪种修饰符



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢Vue,请订阅 专辑传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-4-9 17:31:17 | 显示全部楼层
1.v-bind
2.v-model="chosed" v-bind:value="value"
3.控制同步数据的时机
4.F
5. trim
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-20 17:25:27 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-11-1 21:12:34 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 23:42

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表