vue3第三节(v-model 执行原理)
特殊说明: 以下vue3语法是基于 3.4之前版本进行使用的,3.4之后的版本 引入了 defineModel 宏,后续会介绍defineModel
1、vue3 与vue2 中v-model区别
vue3 中v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue
vue2 中v-model的主要原因是由于value和input事件可能另有它用,比如select、textarea,select选择框绑定的是checked,而不是value,同样接受事件也不是input,而是change
如下图:

2、v3 v2 中绑定单个值:
2.1 vue3中双向绑定单个值,以及自定义绑定值时候
v-model 在原生input上使用
父组件
<template><input v-model="myV3Vale" /><!-- 编译之后等价于 --><input :value="myV3Vale" @input="myV3Vale = $event.target.value"/><!-- 引用组件中 // 默认传值是 modelVale--><my-son-com :modelValue="myV3Vale" :otherPropField="otherPropField"@update:modelValue="newValue => myV3Vale = newValue"@update:otherPropField="newValue => myV3Vale = newValue"></my-son-com>
</template>
子组件
// 以下为:MySonCom.vue
<template><input:value="props.modelValue"@input="emit('update:modelValue', $event.target.value)"/>
</template>
<script setup>
// 默认传参必须是modelValue,事件必须是update:modelValue,在子组件中如下:
const props = defineProps({modelValue: String
})
const emits = defineEmits(["update:modelValue"])
const update = (e) => {emits("update:modelValue", e.target.value)
}
//多个参数时 传递额外参数 otherPropField 必须是如下:v-model:otherPropField,对应的事件是update:otherPropField
const otherProp = defineProps({otherPropField: String
})
const othersEmits = defineEmits(["update:otherPropField"])
const otherUpdate = (e) => {emits("update:otherPropField", e.target.value)
}
</script>
2.2、v2 中绑定单个值、多个值
父组件
<template><!-- 默认传值是 value --><my-com-v2 v-model="myV2Value" v-bind:otherField.sync="otherField"/>// 等价与<my-com-v2 :value="myV2Value" @input="myV2Value = $event"/>// 绑定额外参数 使用 .sync<my-com-v2 v-bind:otherField.sync="otherField"/><my-com-v2 v-bind:otherField="otherField" v-on:update:otherField="otherField = $event"/><!-- 在组件中 -->
</template>
子组件 MyComV2.vue
<template><input type="text" :value="myV2Value" @input="inputChange">
</template>
<script>
export default {name: 'MyComV2',props: {value: {type: String,default: ''},otherField: {type: String,default: '其他属性'}},methods: {inputChange(e) {// v2中双向绑定触发只能是 input 事件this.$emit('input', e.target.value)}}
}
</script>
3.vue3 中绑定多个值 基于3.4版本之前,
父组件
<template><my-son-com v-model:name="name" v-model:person="person"></my-son-com>
</template>>
<script setup>
import { ref, reactive} from 'vue'
const name = ref('Andy')
const person = reactive({age: 18,sex: 'MEN'
})
</script>
子组件 MySonCom.vue
建议使用 setup 语法糖,而不是使用 setup() {} 函数
<template><input type="text" :value="name" @input="$emit('update:name', $event.target.value)"><input type="text" :value="person.age" @input="$emit('update:person', $event.target.value)">
</template>
<script setup>
defineProps({name: String,person: Object
})
defineEmits(['update:name', 'update:person'])
</script>
4.vue3 中不在使用.sync 替代方案是 modelValue底层更新逻辑
v3常用修饰符有 .lazy, .number, .trim
<template>默认是每次 input 事件之后更新数据,而添加lazy之后,变成每次change事件之后才能更新数据;<input type="text" v-model.lazy="name">.number 将用户输入的内容转换为 number 数字,如果无法转换为number类型的数字,则会视为无效的输入;<input type="number" v-model.number="age">.trim 将用户输入内容 两端的空格 自动去除;<input type="text" v-model.trim="name">
</template>
相关文章:
vue3第三节(v-model 执行原理)
特殊说明: 以下vue3语法是基于 3.4之前版本进行使用的,3.4之后的版本 引入了 defineModel 宏,后续会介绍defineModel 1、vue3 与vue2 中v-model区别 vue3 中v-model绑定的不再是value,而是modelValue,接收的方法也不再…...
RunnerGo UI自动化测试脚本如何配置
RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块,覆盖了整个产品测试周期。 RunnerGo UI自动化基于Selenium浏览器自动化方案构建,内嵌高度可复用的测试脚本,测试团队无需复杂的代码编写即可开展低代码的自动化…...
Android 指南针校准进度计算实现
关于Android中指南针的实现,我们可以使用传感器来获取设备的方向信息,从而实现指南针功能。 Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);sensorManager (SensorManager) getSystemService(Conte…...
c++学习:Lambda练习和数组练习
练习一 进行加减乘除 普通方法 #include <iostream> using namespace std; int add(int a,int b) {return ab; } int min(int a,int b) {return a-b; } int mul(int a,int b) {return a*b; } float divRet(int a,int b) {return (float)a/b; } int main() {int a;int …...
数据仓库和数据湖的区别
数据仓库和数据湖是两种不同的数据存储和管理架构,它们有以下区别: 1.数据结构:数据仓库采用结构化的数据模型,通常是规范化的关系型数据库,其中数据以表格形式组织,使用预定义的模式和架构。而数据湖则是…...
tkinterFrame框架+标签框架LabelFrame+Toplevel窗口的使用
1.在tkinter中,Frame是一个容器小部件用于组织和管理其他小部件。它可以作为一个独立的可见区域,也可以作为其他小部件的父容器。 import tkinter as tk import tkinter.ttk as ttk import tkinter.messagebox as mbm tk.Tk() m.title("tkinter L…...
C 语言中的 char 关键字详解
1. char类型 char类型用于存储单个字符,占用1个字节的内存空间。在C语言中,char类型可以用于存储ASCII码表中的任意字符,包括大小写字母、数字、标点符号等。例如: char ch A;在这个例子中,变量ch存储了字符A的ASCI…...
信息安全管理与评估赛题解析-应急响应(含环境)
服务器应急响应 文章目录 服务器应急响应题目:答案:192.168.1.7答案:Linux x86_64答案:shodan答案:DIRSEARCH答案:24/Apr/2022:15:26:42答案:2022答案:/var/www/html/footer.php答案:./prism答案:/root/.mal/prism答案:后门行为相关资源...
微服务-微服务Spring Security OAuth 2实战
1. Spring Authorization Server 是什么 Spring Authorization Server 是一个框架,它提供了 OAuth 2.1 和 OpenID Connect 1.0 规范以及其他相关规范的实现。它建立在 Spring Security 之上,为构建 OpenID Connect 1.0 身份提供者和 OAuth2 授权服务器产品提供了一个安全、轻…...
二次供水物联网:HiWoo Cloud助力城市水务管理升级
随着城市化的快速推进,二次供水系统作为城市基础设施的重要组成部分,其稳定运行和高效管理显得至关重要。然而,传统的二次供水管理方式在应对复杂多变的城市供水需求时,显得力不从心。为了破解这一难题,HiWoo Cloud平台…...
P1015 [NOIP1999 普及组] 回文数
题目传送门 题目描述 若一个数(首位不为零)从左向右读与从右向左读都一样,我们就将其称之为回文数。 例如:给定一个十进制数 56,将 56 加 65(即把 56 从右向左读),得到 121 是一个…...
【MATLAB】兔子机器人动力学模型解读(simulink中的simscape的各模块介绍)
1、动力学模型 Rectangular Joint 控制平面上(x,y轴)的移动,去掉以后,机器人在原地翻滚不移动 Rigid Transform 坐标转换,B站视频已收藏 去掉,机体与地面贴合 此处的作用是设定机体的初…...
小程序配置服务器域名
要配置小程序的服务器域名,您需要在小程序后台进行以下步骤: 登录小程序后台,进入开发设置页面。找到服务器域名配置选项,点击添加域名。输入您的服务器域名,可以添加多个域名,包括请求域名、上传文件域名…...
探究全链路压力测试的含义与重要性
全链路压力测试是指对整个应用系统的各个环节或组件进行压力测试,以模拟实际生产环境中的用户负载和流量,评估系统在高负载条件下的性能表现。 1. 全链路压力测试的含义 全链路压力测试涉及系统的所有组件和环节,包括前端用户界面、应用服务器…...
代码随想录算法训练营day64 || 84. 柱状图中最大的矩形
单调栈,又一次经典来袭! LeetCode:84.柱状图中最大的矩形_哔哩哔哩_bilibili 首先补充昨天接雨水题目解法的更新,代码随想录 中给出双指针和单调栈的解法,其中所采用的思想是计算每一列可以容纳的雨水,非常…...
图的简单介绍
定义及术语 G(V,E):图G的顶点集为V,边集为E。分为有向图和无向图两类。 顶点的度:与该结点相连的边的条数。 出度:顶点的出边条数 入度:顶点的入边条数 顶点的权值称为点权,边的权值称为边权。 存储 1.邻…...
【C#小知识】c#中的delegate(委托)和event(事件)
今天来介绍一下delegate和event。delegate在c#中可以定义一个函数类型,可以将函数作为一个对象来使用。event在c#中则可以看做一个函数的集合,event中包含了一个或多个函数。 delegate using System;public class MyClass {//定义委托public delegate v…...
车规级存储芯片SPI NOR Flash
国产SPI NOR Flash厂家聚辰提供多种容量选择,可满足多种实时操作系统所需的不同存储空间;并且,拥有四种不同电压范围,分别为3V、1.8V、1.2V以及针对电池供电应用推出的1.65V~3.6V宽压供电的产品系列;同时,提…...
CSS轻松学:简单易懂的CSS基础指南
css基础 更多web开发知识欢迎访问我的专栏>>> 01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。 书写位置:…...
06 Qt自绘组件:Switch动画开关组件
系列文章目录 01 Qt自定义风格控件的基本原则-CSDN博客 02 从QLabel聊起:自定义控件扩展-图片控件-CSDN博客 03 从QLabel聊起:自定义控件扩展-文本控件-CSDN博客 04 自定义Button组件:令人抓狂的QToolButton文本图标居中问题-CSDN博客 0…...
C语言完美演绎8-10
/* 范例:8-10 */#include <stdio.h>void arith(int *k, int j) /* 以指针来接收传入数组的首地址 */{int a;for (a0;a<j;a){printf("i[%d]%d\n",a,k[a]);}}void main(){int i[]{1,8,5};arith(i,3); /* 调用函数arith()并传入数组i首地址与数组…...
【仅剩72小时解密窗口】:2026奇点大会AGI芯片安全协议草案全文+3大国产代工厂兼容性验证表(限资深IC设计师领取)
第一章:2026奇点智能技术大会:AGI与硬件设计 2026奇点智能技术大会(https://ml-summit.org) AGI架构对芯片微架构的倒逼演进 本届大会首次披露了基于全栈可微分计算范式的AGI参考模型——Singularity-7B,其训练阶段要求硬件具备动态稀疏张量…...
还在终端里用 Claude Code?CC GUI 把 AI 编码工作流搬回 IDEA
导读Claude Code 很火,Codex 也很火,但对一批长期驻守 IntelliJ IDEA 的开发者来说,真正影响效率的,往往不是模型本身,而是使用姿势。代码写在 IDE 里,工程上下文在 IDE 里,排查问题在 IDE 里&a…...
STM32F103驱动MCP2515避坑指南:为什么你的CAN总线初始化总失败?
STM32F103驱动MCP2515避坑指南:为什么你的CAN总线初始化总失败? 深夜的实验室里,王工盯着示波器上杂乱的SPI波形,第17次按下复位键。这个曾经稳定工作的MCP2515驱动代码,在更换新批次芯片后突然变得不可靠——这正是嵌…...
别再只会用HttpClient了!用C# Socket手搓一个TCP聊天室(WinForms实战)
用C# Socket构建WinForms聊天室:从零实现TCP通信实战 第一次接触网络编程时,看着那些晦涩的协议文档和黑底白字的命令行界面,总觉得离实际应用很远。直到把Socket和WinForms结合起来,才发现原来网络通信可以如此直观——消息在文本…...
Proxmox Mail Gateway (PMG) 部署与基础安全配置实战
1. 为什么企业需要Proxmox Mail Gateway? 最近不少企业的IT部门都在头疼一个问题:Windows Server 2022和Microsoft 365相继取消了SMTP服务,但企业内部的各种系统告警、业务通知又必须通过邮件发送。我去年就遇到过这种情况,当时公…...
winodws下cpolar 公网穿透保姆级安装使用教程
适用场景:把本机运行的服务(如 FastAPI 天气接口)暴露为公网 HTTPS,供 Dify、Apifox、手机等访问。 重要:cpolar 是独立客户端,不是 npm 包,不要使用 npm install cpolar 或 npx cpolar。一、cp…...
如何用Bulk Crap Uninstaller彻底清理Windows软件:免费高效的批量卸载工具指南
如何用Bulk Crap Uninstaller彻底清理Windows软件:免费高效的批量卸载工具指南 【免费下载链接】Bulk-Crap-Uninstaller Remove large amounts of unwanted applications quickly. 项目地址: https://gitcode.com/gh_mirrors/bu/Bulk-Crap-Uninstaller Bulk …...
从Dex-Net 2.0到实际项目:如何用Python和PyTorch复现经典抓取质量评估网络(附数据集处理技巧)
从Dex-Net 2.0到实际项目:Python与PyTorch实战轻量化抓取质量评估模型 在机器人抓取研究领域,Dex-Net系列算法一直被视为性能标杆,但其庞大的数据需求和复杂实现往往让普通开发者望而却步。本文将带您用PyTorch搭建一个保留Dex-Net 2.0核心思…...
从航模到创客:手把手教你用Arduino UNO和好盈40A电调DIY一个小型动力测试台
从航模到创客:用Arduino UNO和好盈40A电调构建专业级动力测试平台 当无刷电机从航模领域走向创客工作台,如何安全高效地测试其性能成为每个硬件爱好者的必修课。本文将带你用Arduino UNO和好盈40A电调打造一个可测量转速、绘制特性曲线、适配多种负载的…...
