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 的模式触发事件取而代之，
