vue v-model(二)

v-model 的参数​

组件上的 v-model 也可以接受一个参数:

<MyComponent v-model:title="bookTitle" />

在子组件中,我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数:

<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script><template><input type="text" v-model="title" />
</template>

如果需要额外的 prop 选项,应该在 model 名称之后传递:

const title = defineModel('title', { required: true })

多个 v-model 绑定​

利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧,我们可以在单个组件实例上创建多个 v-model 双向绑定。

组件上的每一个 v-model 都会同步不同的 prop,而无需额外的选项:

<UserNamev-model:first-name="first"v-model:last-name="last"
/>
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

处理 v-model 修饰符​

在学习输入绑定时,我们知道了 v-model 有一些内置的修饰符,例如 .trim.number 和 .lazy。在某些场景下,你可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize,它会自动将 v-model 绑定输入的字符串值第一个字母转为大写:

<MyComponent v-model.capitalize="myText" />

通过像这样解构 defineModel() 的返回值,可以在子组件中访问添加到组件 v-model 的修饰符:

<script setup>
const [model, modifiers] = defineModel()console.log(modifiers) // { capitalize: true }
</script><template><input type="text" v-model="model" />
</template>

为了能够基于修饰符选择性地调节值的读取和写入方式,我们可以给 defineModel() 传入 get 和 set 这两个选项。这两个选项在从模型引用中读取或设置值时会接收到当前的值,并且它们都应该返回一个经过处理的新值。下面是一个例子,展示了如何利用 set 选项来应用 capitalize (首字母大写) 修饰符:

<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>

带参数的 v-model 修饰符​

这里是另一个例子,展示了如何在使用多个不同参数的 v-model 时使用修饰符:

<UserNamev-model:first-name.capitalize="first"v-model:last-name.uppercase="last"
/>
<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/782608.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯23年第十四届省赛-接龙数列|DFS、线性DP

题目链接&#xff1a; 1.接龙数列 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2023年第十四届省赛真题-接龙数列 - C语言网 (dotcpp.com) 说明&#xff1a; dfs要注意&#xff0c;不能连上的时候绝对不选&#xff1b;能连上的时候可以选&#xff0c;也可以不选。不选的dfs分支是必须经过…

记录rocketMQ5.+启动报错解决过程

1.根据官方文档指引下载对应的rocketMQ源码包&#xff0c;上传到服务器解压 2. 启动NameServer nohup sh bin/mqnamesrv & 验证namesrv是否启动成功 tail -f ~/logs/rocketmqlogs/namesrv.log The Name Server boot success… 3.启动BrokerProxy nohup sh bin/mqbroker -n …

第3章.引导ChatGPT精准角色扮演:高效输出专业内容

角色提示技术 角色提示技术&#xff08;role prompting technique&#xff09;&#xff0c;是通过模型扮演特定角色来产出文本的一种方法。用户为模型设定一个明确的角色&#xff0c;它就能更精准地生成符合特定上下文或听众需求的内容。 比如&#xff0c;想生成客户服务的回复…

Java作业3-字符串

题目一 代码 import java.util.*; public class Main {public static void main(String[] args) {Scanner input new Scanner( System.in );String str input.nextLine();int len str.length();StringBuilder s new StringBuilder(len);//StringBuilder类参考菜鸟教程for…

Kotlin 协程和 Java 线程有什么区别?

Kotlin 协程和 Java 线程是两种不同的并发编程工具&#xff0c;它们在设计哲学、实现机制和使用方式上都有所区别。以下是 Kotlin 协程和 Java 线程之间的一些主要区别&#xff1a; ### 轻量级与资源消耗 - **Kotlin 协程**&#xff1a; - 协程是一种轻量级的并发单位&…

zookeeper--znode数据结构详解

https://www.jianshu.com/p/cbe5f0dd6cca 一、概念详解 zxid Zookeeper中每个状态变化都会产生一个全局唯一的zxid (ZooKeeper Transaction Id)&#xff0c;通过它可确定更新操作的先后顺序&#xff0c;每个更改都将有一个唯一的 zxid。例如&#xff0c;zxid1小于zxid2&…

Centos搭建docker mysql集群

1.执行命令 &#xff1a;docker search mysql 看到有percona 之后docker pull percona/percona-xtradb-cluster:5.7.21 2.docker images 查看该镜像&#xff0c;tag重命名 docker tag percona/percona-xtradb-cluster:5.7.21 pxc 也可以直接下载一下&#xff0c;之后dock…

深入理解HDFS工作原理:大数据存储和容错性机制解析

** 引言&#xff1a; ** 在当今数据爆炸的时代&#xff0c;存储和管理大规模数据成为了许多组织面临的重要挑战。为了解决这一挑战&#xff0c;分布式文件系统应运而生。Hadoop分布式文件系统&#xff08;HDFS&#xff09;作为Apache Hadoop生态系统的核心组件之一&#xff…

是德科技keysight N9000B 信号分析仪

181/2461/8938产品概述&#xff1a; 工程的内涵就是将各种创意有机地联系起来&#xff0c;并解决遇到的问题。 CXA 信号分析仪具有出色的实际性能&#xff0c;它是一款出类拔萃、经济高效的基本信号表征工具。 它的功能十分强大&#xff0c;为一般用途和教育行业的用户执行测试…

深入探讨分布式ID生成方案

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起进步&am…

vue3数据库中存头像图片相对路径在前端用prop只能显示路径或无法显示图片只能显示alt中内容的问题的解决

不想看前情可以直接跳到头像部分代码 前情&#xff1a; 首先我们是在数据库中存图片相对路径&#xff0c;这里我们是在vue的src下的assets专门建一个文件夹img存头像图片。 然后我们如果用prop"avatar" label"头像"是只能显示图片路径的&#xff0c;即lo…

一个好用的日常文字发布模版

01 时间轴&#xff1a;认真感受每一天 每一天都是一幅独特的画卷&#xff0c;等待我们用心去感受和品味。我珍视每一个瞬间&#xff0c;无论是喜悦的欢笑&#xff0c;还是沉思的寂静&#xff0c;都是生命赐予我的宝贵礼物。 清晨&#xff0c;当第一缕阳光洒进窗户&#xff0…

c++11 标准模板(STL)本地化库 - std::tolower(std::locale) 用本地环境的 ctype 刻面将字符转换为小写

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 用本地环境的 ctype 刻面将字符转换为小写 std::tolower(std::locale) temp…

java数组与集合框架(一) -- 数据结构,数组

数据结构 概述 为什么要讲数据结构&#xff1f; 任何一个有志于从事IT领域的人员来说&#xff0c;数据结构&#xff08;Data Structure&#xff09;是一门和计算机硬件与软件都密切相关的学科&#xff0c;它的研究重点是在计算机的程序设计领域中探讨如何在计算机中组织和存储…

座次问题(蓝桥杯)

文章目录 座次问题题目描述回溯算法 座次问题 题目描述 小 A 的学校&#xff0c;老师好不容易解决了蓝桥杯的报名问题&#xff0c;现在老师又犯愁了。 现在有 N 位同学参加比赛&#xff0c;但是老师想给他们排座位&#xff0c;但是排列方式太多了。 老师非常想弄明白最后的…

机器学习和神经网络8

在人工智能领域&#xff0c;神经网络和随机森林是两种强大的机器学习算法。神经网络&#xff0c;特别是深度学习网络&#xff0c;因其在图像和语音识别等复杂任务中的卓越性能而闻名。另一方面&#xff0c;随机森林是一种基于决策树的集成学习技术&#xff0c;它在处理分类和回…

Kafka硬核干货

目录 Kafka Kafka Producer Kafka Consumer Consumer Offset Log Manager 如何实现高吞吐、低延迟

编程题 2

文章目录 概要整体架构流程代码实现总结 概要 企业发放的奖金根据利润提成。 利润(I)低于或等于10万元时&#xff0c;奖金可提10%&#xff1b; 利润高于10万元&#xff0c;低于20万元时&#xff0c;低于10万元的部分按10%提成&#xff0c;高于10万元的部分&#xff0c;可提成…

ctfshow web入门 XXE

XXE基础知识 XXE&#xff08;XML External Entity&#xff09;攻击是一种针对XML处理漏洞的网络安全攻击手段。攻击者利用应用程序在解析XML输入时的漏洞&#xff0c;构造恶意的XML数据&#xff0c;进而实现各种恶意目的。 所以要学习xxe就需要了解xml xml相关&#xff1a; …

计算数组元素中每个元素与其之前各元素的累积乘积ndarray.cumprod()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算数组元素中每个元素 与其之前各元素的累积乘积 ndarray.cumprod() 选择题 关于以下代码输出的结果说法正确的是&#xff1f; import numpy as np a np.array([2,4,6]) print(【显示】a ,…