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
还分不清 Cookie、Session、Token、JWT?看这一篇就够了
Cookie、Session、Token 和 JWT(JSON Web Token)都是用于在网络应用中进行身份验证和状态管理的机制。虽然它们有一些相似之处,但在实际应用中有着不同的作用和特点,接下来就让我们一起看看吧,本文转载至http://juejin.im/post/5e055d9ef265da33997a42cc
47612 13
|
负载均衡 Ubuntu 应用服务中间件
|
SQL Java 数据库连接
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
|
5月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
955 12
|
4月前
|
关系型数据库 MySQL
MySQL数据表添加字段(三种方式)
本文解析了数据表的基本概念及字段添加方法。在数据表中,字段是纵向列结构,记录为横向行数据。MySQL通过`ALTER TABLE`指令支持三种字段添加方式:1) 末尾追加字段,直接使用`ADD`语句;2) 首列插入字段,通过`FIRST`关键字实现;3) 指定位置插入字段,利用`AFTER`指定目标字段。文内结合`student`表实例详细演示了每种方法的操作步骤与结构验证,便于理解与实践。
|
JavaScript 前端开发 数据管理
|
存储 运维 监控
如何在 Spring Boot 中设计和实现业务操作日志功能?
如何在 Spring Boot 中设计和实现业务操作日志功能?
2588 4
|
缓存 Java
java: 警告: 源发行版 17 需要目标发行版 17,java17 无效的目标发行
java: 警告: 源发行版 17 需要目标发行版 17,java17 无效的目标发行
10309 59
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
11月前
|
JSON 搜索推荐 C++
vscode如何更改背景颜色主题,黑色或白色?
【11月更文挑战第16天】在 VS Code 中更改背景颜色主题,可通过三种方式实现:1) 使用快捷键 Ctrl+K 和 Ctrl+T(Mac 上为 Command+K 和 Command+T)选择主题;2) 通过菜单中的“管理”-&gt;“颜色主题”选项选择;3) 修改 settings.json 文件中的 &quot;workbench.colorTheme&quot; 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
23251 6