Vue3 双向绑定

news/2024/9/23 21:15:49/

需求:父和子实现双向数据绑定 (Vue3.4+)

  单参数实现:

父组件------------------<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>

2、对象传递


对象:interface Obj{username:'',password:''
}父组件---------------------------
<UserNamev-model:first-name="first"v-model:last-name="last"v-model:obj='userInfo'
/>
<script setup>const userInfo=ref<obj>({username:'张三',password:'123456'
})
</script>子组件----------------------------------
const userInfo=defineModel<String[]>("ojb", {type: Array,default: () => [],
});<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

注:defineModel:返回的对象ref的,在script中使用时需要加.value获取值,如果是对象传值必须加默认值


http://www.ppmy.cn/news/1466872.html

相关文章

在Linux/Ubuntu/Debian中使用lshw查看系统信息

在Linux/Ubuntu/Debian中使用lshw查看系统信息 lshw 是一个用于显示硬件配置的命令&#xff0c;可以提供系统硬件的详细信息&#xff0c;包括 CPU、内存、硬盘、主板等。该命令需要超级用户权限来获取详细信息。 常见用法&#xff1a; 显示所有硬件信息&#xff1a; sudo l…

21.过拟合和欠拟合示例

1. 背景介绍 在机器学习和深度学习中&#xff0c;过拟合和欠拟合是两个非常重要的概念。过拟合指的是模型在训练数据上表现很好&#xff0c;但在新的测试数据上效果变差的情况。欠拟合则是指模型无法很好地拟合训练数据的情况。这两种情况都会导致模型无法很好地泛化&#xff…

开发语言Java+前端框架Vue+后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势?

开发语言Java前端框架Vue后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势&#xff1f; ADR药物不良反应监测系统具有多个显著的优势&#xff0c;这些优势主要体现在以下几个方面&#xff1a; 一、提高监测效率与准确性&#xff1a; 通过自动化的数据收集…

[ue5]建模场景学习笔记(2)——用vectornoise降低重复率

1.问题分析&#xff1a; 利用改uv的方式降低重复率并不理想&#xff0c;在一定程度上的确能够达到降低重复率的效果&#xff0c;但远看仍然有较清晰的重复效果&#xff0c;尝试优化一下。 2.操作实现&#xff1a; 1.首先先看一下修改后的效果&#xff1a; 这是未修改前&#…

SwiftUI调用相机拍照

在 SwiftUI 中实现拍照功能&#xff0c;需要结合 UIViewControllerRepresentable 和 UIImagePickerController 来实现相机功能。下面是一个详细的示例&#xff0c;展示如何使用 SwiftUI 来实现拍照功能&#xff1a; 1. 创建一个 ImagePicker 组件 首先&#xff0c;创建一个 U…

【从零开始部署SAM(Segment Anything Model )大模型 3 Ubuntu20 离线部署 C++】

这里是目录 总览环境配置模型准备Moble SAM onnx模型获取Moble SAM pre onnx模型获取 运行cmakelist 运行结果 总览 相比于使用python离线部署SAM大模型&#xff0c;C要麻烦的多&#xff0c;本篇的部署过程主要基于项目&#xff1a;https://github.com/dinglufe/segment-anyth…

如何用结构化写好GPT的Prompt提示词

背景 最早接触 Prompt engineering 时, 学到的 Prompt 技巧都是: 你是一个 XX 角色…你是一个有着 X 年经验的 XX 角色…你会 XX, 不要 YY…对于你不会的东西, 不要瞎说!… 对比什么技巧都不用, 直接像使用搜索引擎一样提问, 上面的技巧对于回复的效果确实有着 明显提升. 在看…

【Java】数据加密

目录 数据加密介绍使用场景密码学历史古代密码学凯撒密码例子特点 维吉尼亚密码原理例子特点 现代密码学介绍 现代密码学的加密算法分类哈希算法优点缺点代码示例【封装写法】 对称加密算法对称加密算法的加密过程解密过程对称加密算法的优点&#xff1a;对称加密算法的缺点&am…