Vue双向数据绑定v-model

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