v-model 数据双向绑定用作双向数据绑定
一、组件内部双向数据绑定
- 1、在实例的data中,设置content的起始内容
new Vue({
el: '#root',
data: {
title: 'this is hello world',
content: 'this is content'
}
})
- 2、用v-model实现双向绑定,在input输入框里的内容会实时改变<div>中的内容。
<input v-model="content"/>
<div>{{content}}</div>
二、父子组件之间双向数据绑定
【父组件】
<template>
<div>
<base-checkbox v-model="lovingVue">
</base-checkbox>
<div v-show="lovingVue">
如果选择框打勾我就会显示。
</div>
</div>
</template>
<script>
import BaseCheckbox from
"../components/base-checkbox"
export default {
components: {BaseCheckbox},
data(){
return{
lovingVue:true,
}
},
}
</script>
【子组件】
<template>
<div>
是否选择
<input
type="checkbox"
:checked="checked"
@change="$emit('change',$event.target.checked)"
/>
</div>
</template>
<script>
export default {
model:{
prop:'checked',
event:'change'
},
props:{
checked:Boolean,
},
}
</script>
【运行结果】
【代码解析】
1、将父组件中的 lovingVue
的值与子组件中的 checked
的 prop 的值相绑定,lovingVue的默认值为true,所以运行代码显示第一张图片;
2、父组件通过v-show指令,绑定lovingVue的值,如果为true就显示文字。
3、子组件中为接收父组件的参数,也要设置props中的布尔值cheched。
【代码实现步骤】
【注意:】
-
1、
v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data
选项中声明初始值。 -
2、当使用文本input(包括email,number等)或textarea时,
v-model="varName"
等价于:value="varName" @input="e => varName = e.target.value"
。这意味着每次输入完成后的varName将被更新为输入的值,然后输入的值被设置为varName。正常的select
元素也会像这样,尽管multiple多项选择有所不同。 -
3、在文本区域插值 (<textarea></textarea>) 并不会生效,应用
v-model
来代替。
三、v-model修饰符
v-model还有一些修饰符的功能,主要有‘.lazy’、‘number’和‘.trim’。其主要功能是:
-
.lazy
:默认情况下,‘v-model’在‘input’事件中同步输入框的值与数据,但添加了.lazy
修饰符之后,从而转变为在‘change’事件中同步。简单点说就是延迟了 -
.number
:如果想自动将用户的输入值转换为’Number‘类型(如果原值的转换结果为‘NaN’则返回原值),可以添加.number
修饰符给’v-model‘来处理输入值 -
.trim
:如果要自动过滤用户输入的首尾空格,可以添加.trim
修饰符给’v-model‘上过滤输入
.sync修饰符
真正的双向绑定会带来维护上的问题,所以推荐以 update : my-prop-name
的模式触发事件取而代之,
网友评论