v-model和:model的区别

简介: v-model和:model的区别

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

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


相关文章
|
4月前
组件v-model
组件v-model
49 0
|
4月前
|
JSON 前端开发 开发者
sap.ui.model.Model.checkUpdate 方法介绍
sap.ui.model.Model.checkUpdate 方法介绍
|
1月前
|
存储 SQL 程序员
模型(Model)
【8月更文挑战第19天】
27 2
|
23天前
|
JavaScript 开发者
v-model学习
v-model学习
34 0
|
1月前
|
TensorFlow API 算法框架/工具
【Tensorflow+keras】解决使用model.load_weights时报错 ‘str‘ object has no attribute ‘decode‘
python 3.6,Tensorflow 2.0,在使用Tensorflow 的keras API,加载权重模型时,报错’str’ object has no attribute ‘decode’
32 0
|
2月前
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
92 0
|
3月前
|
JavaScript 前端开发
v-model
v-model
30 0
|
4月前
|
JavaScript 编译器
组件 v-model
组件 v-model
v-model绑定
v-model绑定
68 0