v-model和:model的区别

mj3489408622024-02-26 0:36

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

html 复制代码

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="姓名">
    <el-input v-model="formInline.user" placeholder="请输入"></el-input>
  </el-form-item>
</el-form>

概念：

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 作为事件。