v-model和:model的区别

        场景:在使用el-form时,form上面使用的是:model;而在表单里面的el-input使用的是v-model。那么这两者有什么区别呢?


  
    
  

        概念:

        1)v-model是vue.js中内置的双向数据绑定指令,用于表单控件以外的标签是不起作用的
    (即只对表单控件标签的数据双向绑定有效)。

        2) :model相当于v-bind:model的缩写,v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,这种只是将父组件的数据传递到了子组件,并没有实现子组件和父组件数据的双向绑定。当然引用类型除外,子组件改变引用类型的数据的话,父组件也会改变的。

        区别:el-input 是一个输入控件,需要真实地绑定、处理数据,而 el-form 组件只是用来管理、校验规则等,所以只需要单向绑定。

        附注:v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件;

        1)text 和 textarea 元素使用 value 属性和 input 事件;
        2)checkbox 和 radio 使用 checked 属性和 change 事件;
        3)select 字段将 value 作为 prop 并将 change 作为事件。

人生海海,码途徐徐,在每一段经历中,留下成长的印记,爱自己爱生活爱思考!

你可能感兴趣的:(前端业务场景问题,vue.js,elementui,前端)