022 V 动态绑定数据 & v-model修饰符

不二如是

                               
登录/注册后可看大图

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

在实际开发中，往往需要绑定一个动态的数据，这时就可以用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、如果需要过滤首尾空格使用哪种修饰符



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.v-bind
2.v-model="chosed" v-bind:value="value"
3.控制同步数据的时机
4.F
5. trim

一笙彤

0

jack6666

1