第八节:Vue指令:v-model双向数据绑定

devhaozi · May 14, 2024, 11:32am

theme: cyanosis

关于双向数据绑定

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化

1 v-model 指令的基本使用

示例代码如下:


    
    {{msg}}

示例说明:

当修改数据msg里的内容是, input输入框中的内容就会发生改变.
当修改输入框中的内容时,数据也会自动发生变化

1.1利用其他方式处理模拟双向数据绑定

模拟双向数据绑定来理解v-model治理的核心: 代码如下:



     自定义双向数据绑定 
<!--通过事件改变data中的数据-->
<div>
    <label>姓名：</label>
    <!--通过ref获取DOM元素-->
    <!-- 通过v-bind绑定value值 -->
    <input ref="name" type="text" :value="name" v-on:keyup="logName">
    <span>{{ name }}</span>
</div>

<!--Vue的v-model指令 双向数据绑定-->
<div>
    <label>年龄：</label>
    <input type="text" v-model="age">
    <span>{{ age }}</span>
</div>

2 关于checkbox

对于不能输入内容的表单,比如多选按钮,如果只有一个,或者有多个,v-model指令会有如何显示

#### 2.1 checkbox上使用v-model

如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,

选中就是true,不选择就是false


    
    {{val}}

2.2 没有value的checkbox上使用v-model绑定数组

如果绑定的是数组,则是为了收集选框的内容的.

如果标签没有value,则选中多选按钮时,,则数组里收集表单的值为null, 未选中,收集的值为空


    
    {{val}}

结果

v-model的checkbox.png

2.3 有value的checkbox上使用v-model绑定数组

如果有value属性,那么选中取出的是value的值,未选中则为空


    
    {{val}}

v-model绑定有值的checkbox.png

2.4 此时就可以收集多选按钮数据


    
    
    
    {{val}}

显示结果

v-model收集checkbox数据.png

3 v-model结合radio类型的使用

3.1 v-model 收集单选数据的基本使用

可以使用v-model来收集单选按钮的数据


    
        男
    
    
        女
    
<h2>你选择的性别是:{{ sex }}</h2>

示例中,最开始时,没有默认选中项,

3.2 , 设置默认选中项

如果你希望页面一打开就默认选中男或者女

可以在Vue数据中用来收集当选按钮数据的属性中添加默认值


    
        男
    
    
        女
    
<h2>你选择的性别是:{{ sex }}</h2>

3.3 单选按钮的互斥

正常为了让两个单选按钮拥有互斥功能, 会给单选按钮添加name属性,值相同,表示两个单选按钮属于同一组

只用同一组的单选按钮才会有互斥功能

同样的, 如果我们使用的v-model双向数据绑定动态收集单选按钮数据, 单选按钮也会自动变为互斥的


    
        男
    
    
        女
    
<h2>你选择的性别是:{{ sex }}</h2>

此时,就算去掉name属性, 两个单选按钮也依然是互斥的,因为双向绑定的是通过一个数据

4 v-model结合select类型使用

和checkbox一样, select也分单选和多选

4.1 select单选,只选择一个值

说明:

select如果是单选,意味着每次只能选中一个值.
select双向绑定的数据应该是一个字符串,每次值收集一个数据
如果select双向数据绑定的数据不是字符串,在选中内容后,数据也会被替换为字符串类型的数据

示例代码


    
<h2>你选择水果是:{{ fluit }}</h2>