论坛 › Web密训营 › 022 V 动态绑定数据 & v-model修饰符

不二如是 发表于 2018-9-21 15:35:42

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

Ruide 发表于 2020-4-9 17:31:17

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

一笙彤 发表于 2020-6-20 17:25:27

0

jack6666 发表于 2022-11-1 21:12:34

1

查看完整版本: 022 V 动态绑定数据 & v-model修饰符