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" />
相关推荐
伟笑16 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~34 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士34 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢35 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子43 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪43 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构