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


相关文章
|
SQL Java 数据库连接
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
【mybatis】第一篇,Springboot中使用插件PageHelper不生效解决方案
|
存储 算法 NoSQL
还分不清 Cookie、Session、Token、JWT?看这一篇就够了
Cookie、Session、Token 和 JWT(JSON Web Token)都是用于在网络应用中进行身份验证和状态管理的机制。虽然它们有一些相似之处,但在实际应用中有着不同的作用和特点,接下来就让我们一起看看吧,本文转载至http://juejin.im/post/5e055d9ef265da33997a42cc
48241 13
|
消息中间件 Java 中间件
秒懂消息队列MQ,万字总结带你全面了解消息队列MQ
消息队列是大型分布式系统不可缺少的中间件,也是高并发系统的基石中间件,所以掌握好消息队列MQ就变得极其重要。接下来我就将从零开始介绍什么是消息队列?消息队列的应用场景?如何进行选型?如何在Spring Boot项目中整合集成消息队列。
24886 10
秒懂消息队列MQ,万字总结带你全面了解消息队列MQ
|
6月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
1129 12
|
5月前
|
关系型数据库 MySQL
MySQL数据表添加字段(三种方式)
本文解析了数据表的基本概念及字段添加方法。在数据表中,字段是纵向列结构,记录为横向行数据。MySQL通过`ALTER TABLE`指令支持三种字段添加方式:1) 末尾追加字段,直接使用`ADD`语句;2) 首列插入字段,通过`FIRST`关键字实现;3) 指定位置插入字段,利用`AFTER`指定目标字段。文内结合`student`表实例详细演示了每种方法的操作步骤与结构验证,便于理解与实践。
|
10月前
|
XML JSON Java
SpringMVC详解(全网最全)
### SpringMVC 简介 SpringMVC 是 Spring 框架中的一个模块,用于构建 Web 应用的 MVC 架构。它提供了简洁、优雅的方式来处理 HTTP 请求和响应,支持前后端分离,优化用户体验。 #### 起源与发展 1. **三层架构**:早期的 Servlet 只能处理单一请求,耦合度高,复用性差,整页刷新影响用户体验。 2. **MVC 模式**:部分解耦业务逻辑与视图层,但后端仍负责 View 层,难以应对高并发。 3. **前后端分离**:通过异步调用实现解耦,增强复用性和交互体验。
1667 5
|
消息中间件 JSON Java
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
26957 0
|
缓存 Java
java: 警告: 源发行版 17 需要目标发行版 17,java17 无效的目标发行
java: 警告: 源发行版 17 需要目标发行版 17,java17 无效的目标发行
10856 59
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
883 0
|
12月前
|
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; 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
24214 6