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

不二如是

                               
登录/注册后可看大图

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

在实际开发中，往往需要绑定一个动态的数据，这时就可以用v-bind来实现。

我们还是通过上面的三个例子依次来演示。

单选按钮，创建div：

1. <div id="myApp">
   
2.     <input type="radio" v-model="chosed" v-bind:value="value">
   
3.     <p>chosed:{{chosed}}</p>
   
4.     <p>value:{{value}}</p>
   
5. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             chosed:false,
   
6.             value:333
   
7.         }
   
8.     })
   
9. </script>

复制代码

在选中时，app.chosed == app.value，值都是333。

复选框有多种状态，创建div：

1. <div id="myApp">
   
2.     <input type="checkbox" v-model="chosed" v-bind:true-value="v1" v-bind:false-value="v2">
   
3.     <p>chosed:{{chosed}}</p>
   
4.     <p>v1:{{v1}}</p>
   
5.     <p>v2:{{v2}}</p>
   
6. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             chosed:false,
   
6.             v1:'选中',
   
7.             v2:'未选中'
   
8.         }
   
9.     })
   
10. </script>

复制代码

勾选时，app.chosed == app.v1，即选中。

未勾选时，app.chosed == app.v2，即未选中。

选择列表就更简单些，创建div：

1. <div id="myApp">
   
2.     <select v-model="selected">
   
3.         <option v-bind:value="{number:333}">333</option>
   
4.     </select>
   
5.     {{selected.number}}
   
6. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             selected:''
   
6.         }
   
7.     })
   
8. </script>

复制代码

当选中时，app.selected是一个Object，所以app.selected.number == 333。

---

v-model修饰符

v-model有自己的修饰符，用于控制数据同步的时机。

主要介绍三个常用的：.lazy、.number 、.trim

在输入框中，v-model默认是在input事件中同步输入框的数据，使用.lazy会转变为在change事件中同步。

创建div：

1. <div id="myApp">
   
2.     <input type="text" v-model.lazy="message">
   
3.     <p>{{message}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             message:''
   
6.         }
   
7.     })
   
8. </script>

复制代码

message并不是实时改变，而是在失去焦点或者回车时才更新。

使用.number可以将输入转换为Number类型，否则即使输入的是数字，类型依旧是String。

在数字输入框中很常用，创建div：

1. <div id="myApp">
   
2.     <input type="number" v-model.number="message">
   
3.     <p>{{message}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             message:333
   
6.         }
   
7.     })
   
8. </script>

复制代码

输入类型是NUmber而不是String。

.trim可以自动过滤输入的首尾空格，创建div：

1. <div id="myApp">
   
2.     <input type="text" v-model.trim="message">
   
3.     <p>{{message}}</p>
   
4. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             message:''
   
6.         }
   
7.     })
   
8. </script>

复制代码

---

课后作业


1、如果需要动态绑定数据，使用v-model还是v-bind？

2、补充代码实现v-bind绑定value，v-model绑定chosed：

1.     <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