vue3在子组件上使用多个v-model和修饰符(trim)

Index.vue:

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
import './index.css'

const username = ref('admin')
const password = ref('123456')

onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <div>用户名:{{ username }}</div>
    <div>密码:{{ password }}</div>

    <Child v-model:username.trim="username" v-model:password="password"></Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

<template>
  <input v-model="username" placeholder="请输入" />
  <input v-model="password" placeholder="请输入" />
</template>

<script setup>
const username = defineModel('username')
const password = defineModel('password')
</script>

<style></style>

人工智能学习网站 

https://chat.xutongbao.top

相关推荐

  1. vue3自定义v-model以及自定义修饰符

    2024-05-12 17:38:06       38 阅读
  2. Vue技巧】Vue2Vue3组件使用v-model的实现原理

    2024-05-12 17:38:06       58 阅读
  3. Vue3-HTML标签、组件标签使用v-model

    2024-05-12 17:38:06       50 阅读
  4. Vue3练习】Vue3使用v-model以及v-model

    2024-05-12 17:38:06       57 阅读
  5. 组件使用v-model

    2024-05-12 17:38:06       39 阅读
  6. 组件v-model自定义v-model修饰符(vModelText)

    2024-05-12 17:38:06       55 阅读
  7. vue3 组件实现v-model用法

    2024-05-12 17:38:06       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-12 17:38:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-12 17:38:06       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-12 17:38:06       82 阅读
  4. Python语言-面向对象

    2024-05-12 17:38:06       91 阅读

热门阅读

  1. Android App开机启动

    2024-05-12 17:38:06       37 阅读
  2. vim 查找字符串的命令

    2024-05-12 17:38:06       35 阅读
  3. 关于XDC 约束固化flash流程

    2024-05-12 17:38:06       101 阅读
  4. 学习Uni-app开发小程序Day8

    2024-05-12 17:38:06       33 阅读
  5. 基于springboot的校园社团信息管理系统源码数据库

    2024-05-12 17:38:06       31 阅读
  6. 程序分享--常见算法/编程面试题:跳跃游戏 II

    2024-05-12 17:38:06       36 阅读
  7. 【docker】容器优化:一行命令换源

    2024-05-12 17:38:06       35 阅读