美文网首页
Vue双向数据绑定v-model

Vue双向数据绑定v-model

作者: 兔子不打地鼠打代码 | 来源:发表于2018-06-08 11:46 被阅读107次

    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会忽略所有表单元素的valuecheckedselected特性的初始值。因为它会选择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 的模式触发事件取而代之,

    相关文章

      网友评论

          本文标题:Vue双向数据绑定v-model

          本文链接:https://www.haomeiwen.com/subject/sjuosftx.html