v-model和:model的区别

场景:在使用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 作为事件。

相关推荐
哆啦A梦1588几秒前
Element-Plus
前端·vue.js·ts
IT_陈寒7 分钟前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子30 分钟前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia42 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.1 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia1 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
charlie1145141911 小时前
前端三件套简单学习:HTML篇1
开发语言·前端·学习·html
很多石头1 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd1 小时前
3种XSS攻击简单案例
前端·xss
盖头盖1 小时前
【xss基本介绍】
前端·xss