当前位置: 首页 > news >正文

Vue-2.3v-model原理

原理:v-model本质上是一个语法糖,例如应用在输入框上,就是value属性和input事件的合写。

作用:提供数据的双向绑定

1)数据变,视图跟着变:value

2)视图变,数据跟着变@input

注意:$event用于在模板中,获取事件的形参

<input v-model="msg" type="text">
等价于
<input :value="msg" @input="msg=$event.target.value" type="text">

表单类组件封装&v-model简化代码

v-model不能和父组件传过来的数据进行绑定。

1.表单类组件封装

1)父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据

2)子传父:监听输入,子传父传值给父组件修改

本质:实现子组件和父组件数据的双向绑定

 2.父组件v-model简化代码

1)子组件中:props通过value接收,事件触发input

2)父组件中:v-model给组件直接绑数据(:value+@input)

http://www.lryc.cn/news/189988.html

相关文章:

  • ​左手 Serverless,右手 AI,7 年躬身的古籍修复之路
  • 计算mask的体素数量
  • VR全景营销颠覆传统营销,让消费者身临其境
  • FreeRTOS学习笔记——四、任务的定义与任务切换的实现
  • js 之让人迷惑的闭包 03
  • 10月10日上课内容 Docker--harbor私有仓库部署与管理
  • Java 序列化和反序列化为什么要实现 Serializable 接口
  • vite+vue3+ts中使用require.context | 报错require is not defined | 获取文件夹中的文件名
  • C#(Csharp)我的基础教程(四)(我的菜鸟教程笔记)-Windows项目结构分析、UI设计和综合事件应用的探究与学习
  • Flink: Only supported for operators
  • NSIDC定义的海冰相关概念
  • 【码银送书第八期】《Python数据挖掘:入门进阶与实用案例分析》
  • 微信小程序底部tabBar不显示图标
  • PostgreSQL基操之角色、表空间、数据库与表
  • 【算法|滑动窗口No.1】leetcode209. 长度最小的子数组
  • 11_博客管理系统_实现过程
  • 安防视频监控平台EasyCVR集成到ios系统不能播放是什么原因?如何解决?
  • hutool实现文件上传与下载
  • vue3学习源码笔记(小白入门系列)------provide和 inject 跨层级数据传递原理
  • 【Python深度学习】目标检测和语义分割的区别
  • 取消加考!自考专业调整,2026年起执行新计划!
  • 项目串讲(后端)要讲哪些东西?
  • 区块链技术在供应链管理中的创新应用
  • tcp/ip协议2实现的插图,数据结构2 (9 - 章)
  • 嵌入式Linux裸机开发(六)EPIT 定时器
  • 如何批量导出文件名?
  • sort排序
  • 缓存的力量:提升API性能和可扩展性
  • 部署vSAN相关的名词解释 几句话概括
  • 【C++】进阶模板