09_Vue3中的 toRef 和 toRefs
toRdf
- 作用:创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。
- 语法:
const name = toRef(person,'name')
- 应用:要将响应式对象中的某个属性单独提供给外部使用时。
- 扩展:toRef 与 toRefs 功能一致,但是 toRefs 可以批量创建多个 ref 对象,语法:
toRefs(person)
代码如下
<template><h4>{{person}}</h4><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2>
<!-- 用toRef时,可以直接用{{salary}},用toRefs时,因为拿出来的实际上是job,所以需要用{{job.j1.salary}}--><h2>薪资:{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增加年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>
import {ref,reactive,toRef,toRefs} from 'vue'
export default {name: 'Demo',setup() {//数据let sum = ref(0)let msg = ref('你好啊')let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})//返回一个对象(常用)return {//直接返回整个person对象person,// 用toRef把person中的每个属性单独拿出来// name: toRef(person,'name'),// age: toRef(person,'age'),// salary: toRef(person.job.j1,'salary'),// 用toRefs 把多个属性拿出来...toRefs(person),}}
}
</script>
相关文章:
09_Vue3中的 toRef 和 toRefs
toRdf 作用:创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。语法: const name toRef(person,name) 应用:要将响应式对象中的某个属性单独提供给外部使用时。扩展:toRef 与 toRefs 功能一致࿰…...
JAVA获取视频音频时长 文件大小 MultipartFileUtil和file转换
java 获取视频时长_java获取视频时长_似夜晓星辰的博客-CSDN博客 <dependency><groupId>ws.schild</groupId><artifactId>jave-all-deps</artifactId><version>2.5.1</version></dependency>Slf4j public class VideoTimeUtil…...
刷题笔记 day9
1658 将 x 减到 0 的最小操作数 解析:1. 当数组的两端的数都大于x时,直接返回 -1。 2. 当数组所有数之和小于 x 时 ,直接返回 -1。 3. 数组中可以将 x 消除为0,那么可以从左边减小为 0 ;可以从右边减小为 0 ࿱…...
小白解密ChatGPT大模型训练;Meta开源生成式AI工具AudioCraft
🦉 AI新闻 🚀 Meta开源生成式AI工具AudioCraft,帮助用户创作音乐和音频 摘要:美国公司Meta开源了一款名为AudioCraft的生成式AI工具,可以通过文本提示生成音乐和音频。该工具包含三个核心组件:MusicGen用…...
1 swagger简单案例
1.1 加入依赖 <!--swagger图形化接口--><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version> </dependency><dependency><groupId>io.spri…...
Flutter写一个android底部导航栏框架
废话不多说,上代码: import package:flutter/material.dart;void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(title: Bottom Navigation Bar,theme: ThemeData(…...
关于自动化测试用例失败重试的一些思考
自动化测试用例失败重跑有助于提高自动化用例的稳定性,那我们来看一下,python和java生态里都有哪些具体做法? 怎么做 如果是在python生态里,用pytest做测试驱动,那么可以通过pytest的插件pytest-rerunfailures来实现…...
JS逆向之顶像滑块
本教程仅限于学术探讨,也没有专门针对某个网站而编写,禁止用于非法用途、商业活动、恶意滥用技术等,否则后果自负。观看则同意此约定。如有侵权,请告知删除,谢谢! 目录 一、接口请求流程 二、C1包 三、ac 四…...
【css】textarea-通过resize:none 禁止拖动设置大小
使用 resize 属性可防止调整 textareas 的大小(禁用右下角的“抓取器”): 没有设置resize:none 代码: <!DOCTYPE html> <html> <head> <style> textarea {width: 100%;height: 150px;padding: 12px 20p…...
Linux内核学习小结
网上学习总结的一些资料,加上个人的一些总结。 Linux内核可以分成基础层和应用层。 基础层包括数据结构,内核同步机制,内存管理,任务调度。 应用层包括文件系统,设备和驱动,网络,虚拟化等。文件…...
八、ESP32控制8x8点阵屏
引脚的说明如下 上图中 C表示column 列的意思,所有的C接高电压,即控制esp32中输出1L表示line 行的意思,所有的L接低电压,即控制esp32中输出为01. 运行效果 2. 点阵屏引脚...
使用gitee创建远程maven仓库
1. 创建一个项目作为远程仓库 2. 打包项目发布到远程仓库 id随意,url是打包到哪个文件夹里面 在需要打包的项目的pom中添加 <distributionManagement><repository><id>handsomehuang-maven</id><url>file:D:/workspace/java/2023/re…...
基于C#的应用程序单例唯一运行的完美解决方案 - 开源研究系列文章
今次介绍一个应用程序单例唯一运行方案的代码。 我们知道,有些应用程序在操作系统中需要单例唯一运行,因为程序多开的话会对程序运行效果有影响,最基本的例子就是打印机,只能运行一个实例。这里将笔者单例运行的代码共享出来&…...
2023-08-07力扣今日二题
链接: 剑指 Offer 29. 顺时针打印矩阵 题意: 如题 解: 麻烦的简单题,具体操作类似走地图,使用一个长度四的数组表示移动方向 我这边的思路是如果按正常的方向没有路走了,那转向下一个方向一定有路&am…...
Spring接口ApplicationRunner的作用和使用介绍
在Spring框架中,ApplicationRunner接口是org.springframework.boot.ApplicationRunner接口的一部分。它是Spring Boot中用于在Spring应用程序启动完成后执行特定任务的接口。ApplicationRunner的作用是在Spring应用程序完全启动后,执行一些初始化任务或处…...
奶牛排队 java 思维题
👨🏫 5133. 奶牛排队 题目描述 约翰的农场有 n n n 头奶牛,每一头奶牛都有一个正整数编号。 不同奶牛的编号不同。 现在,这 n n n 头牛按某种顺序排成一队,每头牛都拿出一张纸条写下了其前方相邻牛的编号以及其…...
uniapp 微信小程序 判断数据返回的是jpg还是pdf,以及pdf预览
<template> <view class"approval-notice"><block v-for"(imgItem, idx) in drivingLicense" :key"idx">//如果是非图片,那就走pdf预览<view class"pdf-item" v-if"Object.keys(thumbnail).incl…...
SpringBoot 的事务及使用
一、事务的常识 1、事务四特性(ACID) A 原子性:事务是最小单元,不可再分隔的一个整体。C 一致性:事务中的方法要么同时成功,要么都不成功,要不都失败。I 隔离性:多个事务操作数据库中同一个记录或多个记录时,对事务进…...
Android中的ABI
Android中的ABI ABI是Application Binary Interface的缩写。 ABI常表示两个程序模块之间的接口,且其中一个模块常为机器码级别的library或操作系统。 ABI定义了函数库的调用、应用的二进制文件(尤其是.so)如何运行在相应的系统平台上等细节…...
Python爬虫在用户行为模型构建中的应用与挑战
嗨,大家好!作为一名专业的爬虫代理,我今天要和大家分享一些关于爬虫与人类行为分析的知识。在数字化时代,我们每天都在互联网上留下大量的数据痕迹,通过分析这些数据,我们可以理解用户行为、性偏好和需求&a…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一:使用Read()读取文件2.3、方式二:bufio读取文件2.4、方式三:os.ReadFile读取2.5、写…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
