v-model使用

简介: v-model使用

在表单上的应用

动态绑定input的value指向msg变量,并且在触发input事件的时候去动态把mmsg设置为目标值

<input v-mode="data"/>
等同于
<input v-bind:value="msg" v-on:input="msg=$event.target.value"/>
1
2
3

a856efcb46754da28a95f58fb52bba51.png

在组件上的应用

在自定义组件中,v-model默认会利用value的prop和名字为input的事件

本质上是一个父子传值,通过prop和$emit实现。因此父组件v-model语法糖本质上就可以修改:

<aa-input v-model="aa"/>
等同于:
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"/>
子组件:
<input v-bind:vlaue="aa" v-on:input="msg"/>
props:{
  value:aa
},
methods:{
  msg(e){
  $emit('input',e.target.vlaue)
  }
}


相关文章
|
Android开发
Android Studio APP开发入门之对话框Dialog的讲解及使用(附源码 包括提醒对话框,日期对话框,时间对话框)
Android Studio APP开发入门之对话框Dialog的讲解及使用(附源码 包括提醒对话框,日期对话框,时间对话框)
492 0
|
10月前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
11月前
|
存储 运维 安全
上云迁移的五个步骤,企业私有云的详细教程
上云迁移的五个步骤,企业私有云的详细教程
|
SQL 数据采集 JSON
弱结构化日志 Flink SQL 怎么写?SLS SPL 来帮忙
弱结构化日志 Flink SQL 怎么写?SLS SPL 来帮忙
125985 137
|
存储 数据库 数据安全/隐私保护
本地文件内容搜索神器AnyTXT Searcher如何搭建与远程访问
本地文件内容搜索神器AnyTXT Searcher如何搭建与远程访问
614 0
|
消息中间件 Kafka
使用kafka自带脚本进行压力测试
使用kafka自带脚本进行压力测试
273 0
|
缓存 前端开发 安全
细究Java类加载机制和Tomcat类加载机制
细究Java类加载机制和Tomcat类加载机制
112 0
|
存储
SkyWalking 中如何构建异步链路的 Trace
SkyWalking 中如何构建异步链路的 Trace
3674 1
SkyWalking 中如何构建异步链路的 Trace
|
开发工具 git C++
通过VS2019 + Git 上传本地代码至云效代码管理 Codeup
通过VS2019 + Git 上传本地代码至云效代码管理 Codeup
1916 0
通过VS2019 + Git 上传本地代码至云效代码管理 Codeup

热门文章

最新文章