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


相关文章
|
NoSQL 关系型数据库 MySQL
泛微Ecology9+Emobile7部署
泛微OA的平台化,相比之下,的确是很不错,为方便公司内部考勤,加班审批,报销等流程,这边采用泛微的E9
7282 0
泛微Ecology9+Emobile7部署
|
缓存 监控 网络安全
因服务器时间不同步引起的异常
因服务器时间不同步引起的异常
2117 1
|
SQL 缓存
mybatisplus分页查询——Page
(2)各个参数的含义 (1)records:用来存放查询出来的数据 (2)total: 用来返回记录的总数 (3)size: 每页显示条数,默认 10 (4)current:表示当前页,默认1 (5)orders: 排序字段信息 (6)optimizeCountSql: 自动优化 COUNT SQL,默认true (7)isSearchCount: 是否进行 count 查询,默认true (8)hitCount: 是否命中count缓存,默认false
2081 0
|
SQL XML Java
【mybatis】第二篇:@Select注解中加入字段判断
【mybatis】第二篇:@Select注解中加入字段判断
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
722 3
|
JSON JavaScript Android开发
原生与 Uniapp 的通信机制是如何实现双向调用的?
原生与 Uniapp 的通信机制是如何实现双向调用的?
1377 137
|
人工智能 自然语言处理 API
阿里云百炼xWaytoAGI共学课DAY1 - 必须了解的企业级AI应用开发知识点
本课程旨在介绍阿里云百炼大模型平台的核心功能和应用场景,帮助开发者和技术小白快速上手,体验AI的强大能力,并探索企业级AI应用开发的可能性。
3949 85
|
监控 NoSQL Java
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
若依(RuoYi)是一款基于Spring Boot和Vue.js的开源Java快速开发脚手架,支持OAuth2、JWT鉴权,集成多种安全框架和持久化框架。它提供了系统管理、监控管理、任务调度、代码生成等常用功能模块,适合中小型公司快速搭建Web应用。本文主要介绍若依框架的特点、版本发展、优缺点及项目部署步骤,帮助开发者快速上手并部署若依项目。
24306 3
若依RuoYi项目环境搭建教程(RuoYi-Vue + RuoYi-Vue3版本)
|
JavaScript
Vite 按需引入 Ant Design Vue 3.0
Vite 按需引入 Ant Design Vue 3.0
|
Ubuntu Linux 网络安全
Linux系统通过fail2ban对暴力破解进行防护
Linux系统通过fail2ban对暴力破解进行防护
835 3