Vue--关于v-model指令

语法糖

v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件。

当其作用于表单元素时vue会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value属性和input事件,而当其作用于单选框或多选框时,它会生成checked属性和change事件。

v-model也可作用于自定义组件,当其作用于自定义组件时 ,默认情况下,它会生成一个value属性和input事件。

html 复制代码
<Comp v-model="data" />
<!-- 等效于 -->
<Comp :value="data" @input="data=$event" />

开发者可以通过组件的model配置来改变生成的属性和事件:

js 复制代码
// Comp
const Comp = {
  model: {
    prop: "number", // 默认为 value
    event: "change" // 默认为 input
  }
  // ...
}
html 复制代码
<Comp v-model="data" />
<!-- 等效于 -->
<Comp :number="data" @change="data=$event" />
相关推荐
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
维他命Coco6 小时前
js常见开发学习
javascript
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节