当前位置： 首页 > news >正文

vue3 toRefs之后的变量修改方法

news 2026/5/20 1:00:32

上效果

 修改值需要带上解构之前的对象名obj，

changeName:()=>{
          // toRefs 解决后变量修改值方法： 解构前变量.字段=新值
           obj.name = 'FEIFEI';
        }
      } 

案例源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>reactive响应式</title><script src="js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="js/elementPlus/index.css"><script src="js/elementPlus/index.full.js"></script>
</head><body>
<div id="app">{{ id }}<br/>{{ name }}<el-button @click="changeName">修改名称（toRefs之后）</el-button>
</div>
</body>
<script>const {createApp, ref, toRefs} = Vueconst app = Vue.createApp({setup(prop, context) {const {toRefs, reactive} = Vue;//reactive与toRefs配合使用let obj = reactive({id: 1, name: 'ls'});//将变量通过toRefs解析之后，修改变量的值setTimeout(() => {obj.id = 111;}, 2000);const {id, name} = toRefs(obj);return {id,name,changeName:()=>{// toRefs 解决后变量修改值方法： 解构前变量.字段=新值obj.name = 'FEIFEI妃';}}}});app.use(ElementPlus)app.mount("#app")</script>
</html>

相关文章：

vue3 toRefs之后的变量修改方法

上效果 修改值需要带上解构之前的对象名obj&#xff0c; changeName:()>{ // toRefs 解决后变量修改值方法&#xff1a; 解构前变量.字段新值 obj.name FEIFEI; } } 案例源码 <!DOCTYPE html> <html> <head><me…...

编程日记 2024/2/23 10:47:21

【教程】详解相机模型与坐标转换

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 由于复制过来&#xff0c;如果有格式问题&#xff0c;推荐大家直接去我原网站上查看&#xff1a; 相机模型与坐标转换 - 生活大爆炸 目录 经纬度坐标系 转 地球直角坐标系大地直角坐标系 转 经纬度坐标系地理坐标…...

编程日记 2024/2/23 10:42:16

171基于matlab的随机共振微弱信号检测

基于matlab的随机共振微弱信号检测&#xff0c;随机共振描述了过阻尼布朗粒子受周期性信号和随机噪声的共同作用下,在非线性双稳态系统中所发生的跃迁现象. 随机共振可用于弱信号的检测。程序已调通&#xff0c;可直接运行。...

编程日记 2024/2/23 10:38:12

petalinux_zynq7 驱动DAC以及ADC模块之三：实现C语言API并编译出库被python调用

前文&#xff1a; petalinux_zynq7 C语言驱动DAC以及ADC模块之一&#xff1a;建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C语言驱动DAC以及ADC模块之二&#xff1a;petalinuxhttps://blog.csdn.net/qq_27158179/article/details/1362…...

编程日记 2024/2/23 10:36:10

NXP实战笔记（五）：S32K3xx基于RTD-SDK在S32DS上配置ADC的硬件触发同步采样与软件采样过程

目录 1、概述 1.1、软件触发 1.2、硬件触发 - BCTU 1.3、硬件触发 - TRGMUX 1.4、ADC的校准 1.5、ADC时钟配置 2、BTCU硬件触发ADC的SDK配置 3、软件触发ADC 3.1、选择相应Port作为ADC的输入 3.2、ADC配置 3.3、代码示例 1、概述 恩智浦 S32K3xx 系列汽车微控制器…...

编程日记 2024/2/23 10:34:05

pikachu靶场-CSRF

CSRF: 介绍&#xff1a; Cross-site request forgery简称为"CSRF”。 在CSF的攻击场景中攻击者会伪造一个请求&#xff08;这个请求一般是一个链接&#xff09; 然后欺骗目标用户进行点击&#xff0c;用户一旦点击了这个请求&#xff0c;整个攻击也就完成了&#xff0…...

编程日记 2024/2/23 10:33:04

【结合OpenAI官方文档】解决Chatgpt的API接口请求速率限制

OpenAI API接口请求速率限制 速率限制以五种方式衡量&#xff1a;RPM&#xff08;每分钟请求数&#xff09;、RPD&#xff08;每天请求数&#xff09;、TPM&#xff08;每分钟令牌数&#xff09;、TPD&#xff08;每天令牌数&#xff09;和IPM&#xff08;每分钟图像数&#x…...

编程日记 2024/2/23 10:32:03

C语言实现基础数据结构——栈

目录 栈 栈的实现 数组栈 数组栈的实现 栈的初始化 栈的销毁 数据入栈 判断栈是否为空 数据出栈 获取栈顶元素 获取栈内数据个数 项目实现 栈的基础练习 有效的括号 栈 栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的…...

编程日记 2024/2/23 10:31:02

船舶制造5G智能工厂数字孪生可视化平台，推进船舶行业数字化转型

船舶制造5G智能工厂数字孪生可视化平台&#xff0c;推进船舶行业数字化转型。随着数字化时代的到来&#xff0c;船舶行业正面临着前所未有的机遇与挑战。为了适应这一变革&#xff0c;船舶制造企业需要加快数字化转型的步伐&#xff0c;提高生产效率、降低成本并增强市场竞争力…...

编程日记 2024/2/23 10:16:48

【网络编程】okhttp深入理解

newCall 实际上是创建了一个 RealCall 有三个参数&#xff1a;OkHttpClient&#xff08;通用配置&#xff0c;超时时间等&#xff09; Request(Http请求所用到的条件&#xff0c;url等) 布尔变量forWebSocket&#xff08;webSocket是一种应用层的交互方式&#xff0c;可双向交互…...

编程日记 2024/2/23 10:15:45

大功率厚膜电阻器制造 – 优化性能？

通过优化工业大功率电阻器制造工艺&#xff0c;制造商可以提高电阻器的性能和可靠性、容差、额定电压、TCR、稳定性和额定功率。 在本文中&#xff0c;我们将介绍工业功率电阻器的制造过程。我们讨论了材料选择和生产技术及其对性能的潜在影响。 完美的电阻器 在其整个使用寿…...

编程日记 2024/2/23 10:13:43

ElasticStack安装(windows)

官网 : Elasticsearch 平台 — 大规模查找实时答案 | Elastic Elasticsearch Elastic Stack(一套技术栈) 包含了数据的整合 >提取 >存储 >使用&#xff0c;一整套! 各组件介绍: beats 套件:从各种不同类型的文件/应用中采集数据。比如:a,b,cd,e,aa,bb,ccLogstash:…...

编程日记 2024/2/23 10:11:41

gitlab的使用

前一篇文章我们已经知道Git人人都是中心&#xff0c;那他们怎么交互数据呢&#xff1f; • 使用GitHub或者码云等公共代码仓库 • 使用GitLab私有仓库 目录 一、安装配置gitlab 安装 初始化 这里初始化完成以后需要记住一个初始密码 查看状态 二、使用浏览器访问&#xf…...

编程日记 2024/2/23 10:10:40

基于springboot+vue的植物健康系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…...

编程日记 2024/2/23 10:05:36

Python爬虫实战入门：爬取360模拟翻译(仅实验)

文章目录 需求所需第三方库requests 实战教程打开网站抓包添加请求头等信息发送请求&#xff0c;解析数据修改翻译内容以及实现中英互译 完整代码 需求 目标网站&#xff1a;https://fanyi.so.com/# 要求&#xff1a;爬取360翻译数据包&#xff0c;实现翻译功能 所需第三方库 …...

编程日记 2024/2/23 9:57:29

微服务-微服务API网关Spring-clould-gateway实战

1. 需求背景 在微服务架构中&#xff0c;通常一个系统会被拆分为多个微服务&#xff0c;面对这么多微服务客户端应该如何去调用呢&#xff1f; 如果根据每个微服务的地址发起调用&#xff0c;存在如下问题&#xff1a; 1.客户端多次请求不同的微服务&#xff0c;会增加客户端…...

编程日记 2024/2/23 9:55:27

ECMAScript modules规范示例详解

ECMAScript modules&#xff08;简称 ES modules&#xff09;是JavaScript的标准模块系统。每个模块都是一个独立的JavaScript文件&#xff0c;可以在其中定义导出的变量、函数或类&#xff0c;并从其他模块中导入这些变量、函数或类。以下是ES modules规范的一些示例和详解&am…...

编程日记 2024/2/23 9:52:23

【OpenFeign常用配置】

OpenFeign常用配置 快速入门&#xff1a;1、引入依赖2、启用OpenFeign 实践1、引入依赖2、开启连接池功能3、模块划分4、日志5、重试 快速入门&#xff1a; OpenFeign是一个声明式的http客户端&#xff0c;是spring cloud在eureka公司开源的feign基础上改造而来。其作用及时基于…...

编程日记 2024/2/23 9:51:21

第2.1章 StarRocks表设计——概述

注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的表设计相关内容。 建表是使用StarRocks非常重要的一环&#xff0c;规范化的表设计在某些场景下能使查询性能有数倍的提升。StarRocks的表设计涉及到的知识点主要包括数据表类型、数据分布&#xff08;分区分桶及排序键&#…...

编程日记 2024/2/23 9:48:19

WooCommerce商品采集与发布插件

如何采集商品或产品信息&#xff0c;并自动发布到Wordpress系统的WooCommerce商品&#xff1f; 推荐使用简数采集器&#xff0c;操作简单方便&#xff0c;且无缝衔接WooCommerce插件&#xff0c;快速完成商品的采集与发布。 简数采集器的智能自动生成采集规则和可视化操作功能…...

编程日记 2024/2/23 9:47:18

别再凭感觉布线了！用ADS仿真手把手教你搞定PCB信号完整性的5种端接方案

高速PCB设计实战&#xff1a;5种端接方案在ADS中的精准仿真与选型指南 当你在深夜盯着示波器上扭曲的方波和顽固的振铃时&#xff0c;是否曾怀疑过自己的PCB设计生涯&#xff1f;信号完整性不是玄学&#xff0c;而是一门可以通过仿真精确控制的工程艺术。本文将用Keysight ADS&…...

编程新知 2026/5/20 0:42:31

别再只调库了！手写KNN算法识别MNIST数字，从距离计算到加权投票的完整实现与性能对比

从零构建KNN算法&#xff1a;MNIST手写数字识别的底层实现与深度优化 在机器学习入门阶段&#xff0c;K最近邻&#xff08;KNN&#xff09;算法往往是第一个接触的经典分类方法。大多数教程止步于调用sklearn的几行代码&#xff0c;却忽略了算法底层的精妙设计。本文将带您从数…...

编程新知 2026/5/20 0:34:11

FPGA存储资源怎么选？一张图看懂LUTRAM、BRAM和URAM的适用场景与性能差异

FPGA存储资源选型指南&#xff1a;LUTRAM、BRAM与URAM的深度对比与实战选择 在FPGA设计的世界里&#xff0c;存储资源的选择往往决定了整个系统的性能和效率。想象一下&#xff0c;你正在为一个高性能图像处理系统设计FPGA架构&#xff0c;需要在片上实现一个容量为128Kb的帧缓…...

编程新知 2026/5/19 23:58:53

基于Trinket与NeoPixel的声控LED色彩风琴制作全攻略

1. 项目概述&#xff1a;让声音驱动光效色彩风琴&#xff0c;一个听起来有些复古的名字&#xff0c;在七八十年代的迪斯科舞厅和家庭派对上&#xff0c;它曾是营造氛围的明星。本质上&#xff0c;它就是一个声控灯光系统&#xff0c;能够将音乐的节奏和强度实时转化为绚丽的光影…...

编程新知 2026/5/19 23:48:04

别再死磕PI参数了！用MATLAB/Simulink手把手教你搭建异步电机FOC仿真（附模型下载）

异步电机FOC仿真实战&#xff1a;从零搭建到参数调优全指南 在电机控制领域&#xff0c;矢量控制(FOC)技术因其优异的动态性能和效率表现&#xff0c;已成为工业应用中的主流方案。然而从理论到实践的跨越往往充满挑战——许多工程师能够理解Park变换、空间矢量调制等概念&…...

编程新知 2026/5/19 22:07:35

G-Helper：华硕笔记本用户的终极轻量级硬件控制方案

G-Helper&#xff1a;华硕笔记本用户的终极轻量级硬件控制方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Exper…...

编程新知 2026/5/19 22:00:50

保姆级教程：用QGIS 3.22.16给火星遥感影像‘抠图’，从创建矢量图层到GDAL裁剪一步到位

火星地质勘探实战&#xff1a;用QGIS精准提取毅力号影像的五大核心技巧 当第一缕阳光掠过火星杰泽罗陨石坑的悬崖&#xff0c;毅力号传回的遥感影像中藏着无数科学秘密。作为太空数据分析师&#xff0c;我们常需要从广袤的火星地表影像中精确"抠"出目标区域——就像地…...

编程新知 2026/5/19 21:15:35

运算放大器：从虚短虚断到负反馈，掌握模拟电路核心设计

1. 从“石头”与“水库”到“运算放大器”&#xff1a;一个电子世界的演化故事如果你拆开过任何一台现代电子设备&#xff0c;从手机到汽车&#xff0c;从血糖仪到工业机器人&#xff0c;你大概率会找到一个或多个不起眼的八脚或十四脚黑色小方块——运算放大器。它不像CPU那样…...

编程新知 2026/5/19 20:46:22

别再乱接线了！12V手电钻保护板（B+/B-/B1/B2）保姆级接线图解，附万用表检测电池坏点技巧

12V手电钻保护板接线全攻略&#xff1a;从原理到实战的安全操作指南 面对手电钻保护板上密密麻麻的接线端子&#xff0c;即使是经验丰富的DIY爱好者也难免感到困惑。B、B-、B1、B2这些看似简单的标记背后&#xff0c;实际上隐藏着锂电池组安全工作的关键机制。本文将带您深入理…...

编程新知 2026/5/19 20:43:54

实测Llama3 8B在国产AI盒子上的推理速度：算丰SG2300x Airbox跑出9.6 token/s

实测Llama3 8B在国产AI盒子上的推理速度&#xff1a;算丰SG2300x Airbox跑出9.6 token/s 当Meta开源Llama3大模型的消息席卷AI社区时&#xff0c;一个更实际的问题浮出水面&#xff1a;如何让这个性能怪兽在边缘设备上真正跑起来&#xff1f;我们拿到搭载算丰SG2300x芯片的Radx…...

编程新知 2026/5/19 20:01:39