vue3自定义多个v-model以及自定义修饰符

从 Vue 3.4 开始,推荐的实现方式是使用 defineModel() 宏:

废话不多说,直接上代码

javascript 复制代码
<!-- Son.vue -->
<script setup>
const model = defineModel()
</script>

<template>
  <span>My input</span> <input v-model="model">
</template>

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

多个v-model

javascript 复制代码
<!-- Parent.vue -->
<UserName
  v-model:first-name1="first"
  v-model:last-name1="last"
/>
<!-- Son.vue -->
<script setup>
const firstName = defineModel('firstName1')  //这里的参数就是父组件v-model后面的值
const lastName = defineModel('lastName1')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

处理 自定义v-model 修饰符

javascript 复制代码
<!-- Parent.vue -->
<MyComponent v-model.capitalize="myText" />

<!-- Son.vue -->
<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>

vue3官方文档

相关推荐
翻滚吧键盘3 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹9 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志11 分钟前
typescript结构化类型应用两例
javascript
杨进军30 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js