vue3 toRefs之后的变量修改方法

上效果

 修改值需要带上解构之前的对象名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>

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

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

相关文章

如何在pgAdmin中用替换的值更新jsonb列?

我有一个名为files的PostgreSQL表&#xff0c;其中包括一个名为formats的jsonb表。虽然有些行是[null]&#xff0c;但其他行具有此结构的对象&#xff1a; {"thumbnail": {"ext": ".jpg","url": "https://some-url.com/image01.…

Vue | (四)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;初始化脚手架&#x1f407;创建初体验&#x1f407;分析脚手架结构&#x1f407;关于render&#x1f407;查看默认配置 &#x1f4da;ref与props&#x1f407;ref属性&#x1f407;props配置项 &#x1f4da;混入&#x1f4da;插件&#x1f4da;scoped样…

idea配置javafx

一、下载sdk 在jdk8之后,需要下载sdk包 📎javafx-sdk-18.zip 这里适用的jkd版本如图 二、配置 创建一个项目之后,进行如下配置,将sdk导入到项目中 配置启动参数 可以使用-号将之前的去掉&

同步 BUCK 与 异步 BUCK 的区别

上篇文章介绍 BUCK 基本拓扑电路工作原理&#xff0c;BUCK 电路如下图&#xff1a; 因为二极管的存在&#xff0c;只需要控制一个 MOS 管开关&#xff0c;一般将该电路称为异步 BUCK 电路&#xff0c;如果把这个二极管换为 MOS 管&#xff0c;如下图&#xff1a; 该电路用到了两…

vue Threejs实现任意画线(鼠标点击画线)

Threejs实现任意画线(鼠标点击画线) 鼠标左键单击添加点鼠标右键回退到上一个点,并继续画按住shift可以画平行于x轴或平行于z轴的线按Esc完成画线

【leetcode题解C++】121.买卖股票的最佳时机 and 122.买卖股票的最佳时机II and 55.跳跃游戏 and 45.跳跃游戏II

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…

汽车信息安全概述

随着智能网联汽车的迅猛发展&#xff0c;车辆不再是简单的交通工具&#xff0c;而是集数据收集、处理与通信于一体的移动智能终端。然而&#xff0c;这一变革也使得汽车成为黑客攻击的新目标。汽车信息安全问题日益凸显&#xff0c;成为行业关注的焦点。本文将深入探讨汽车信息…

前后端分离vscode保险业务管理系统vue+Nodejs

本设计主要应用于完成对保险业务进行计算机化的管理。系统前台展示各种种类的保险&#xff0c;顾客可以选择登陆后买入。公司员工为管理员&#xff0c;由公司统一分配账号&#xff0c;员工用工号密码登陆。可以修改密码&#xff0c;查看、修改自己的信息。员工可处理顾客信息。…

企微hook框架

https://wwm.lanzoum.com/ipUTp1ot1twh 密码:hvev 免费的企微框架 支持文本消息&#xff0c;图片消息&#xff0c;视频消息&#xff0c;文件消息。 其他可自行下载测试。 有兴趣可以进群交流。720192224 BOOL WxWorkSendData(string data) { WX_GETOBJDATA ob…

1.CSS单位总结

CSS 单位总结 经典真题 px 和 em 的区别 CSS 中的哪些单位 首先&#xff0c;在 CSS 中&#xff0c;单位分为两大类&#xff0c;绝对长度单位和相对长度单位。 绝对长度单位 我们先来说这个&#xff0c;绝对长度单位最好理解&#xff0c;和我们现实生活中是一样的。在我们…

Windows sever Event 70117000事件日志

背景&#xff1a;Windows server2008 频繁蓝屏&#xff0c;日志报错信息时间ID&#xff1a;7011&7000&#xff0c;Service Control Manager 原因&#xff1a;Service Control Manager transmits control requests to running services and driver services. It also maint…

mysql-MVCC

一、基础概念 1. MVCC的含义 MVCC (Multiversion Concurrency Control)&#xff0c;即多版本并发控制技术&#xff0c;它是通过读取某个时间点的快照数据&#xff0c; 来降低并发事务冲突而引起的锁等待&#xff0c; 从而提高并发性能的一种机制. MVCC 的实现,是通过保存数据…

汽车常识网:电脑主机如何算功率的计算方法?

今天汽车知识网就给大家讲解一下如何计算一台主机的功率。 它还会解释如何计算计算机主机所需的功率&#xff1f; &#xff1f; &#xff08;如何计算电脑主机所需的功率&#xff09;进行说明。 如果它恰好解决了您现在面临的问题&#xff0c;请不要忘记关注本站。 让我们现在就…

勒索组织再次盯紧制造业!亚信安全发布《勒索家族和勒索事件监控报告》

本周态势快速感知 本周全球共监测到勒索事件104起&#xff0c;事件数量有所下降。 lockbit3.0仍然是影响最严重的勒索家族&#xff1b;hunters和play也是两个活动频繁的恶意家族&#xff0c;需要注意防范。 本周8base勒索组织窃取安索杰国际贸易公司大量文件&#xff0c;包括…

谷歌掀桌子!开源Gemma:可商用,性能超过Llama 2!

2月22日&#xff0c;谷歌在官网宣布&#xff0c;开源大语言模型Gemma。 Gemma与谷歌最新发布的Gemini 使用了同一架构&#xff0c;有20亿、70亿两种参数&#xff0c;每种参数都有预训练和指令调优两个版本。 根据谷歌公布的测试显示&#xff0c;在MMLU、BBH、GSM8K等主流测试…

解密C语言选择结构:掌握条件语句与分支逻辑的利器

引言 C语⾔是结构化的程序设计语⾔&#xff0c;这⾥的结构指的是顺序结构、选择结构、循环结构。为什么有着三种结构呢&#xff0c;大家其实可以想象一下&#xff0c;生活中的绝大数事情都可以抽象着三种结构&#xff0c;而我们今天要给大家介绍的就是三大结构之一——选择结构…

Jenkins 中部署Nodejs插件并使用,并构建前端项目(3)

遇到多个版本nodeJS需要构建的时候 1、第一种就是一个配置安装&#xff0c;然后进行选中配置 2、第二种就是插件&#xff1a;nvm-wrapper&#xff0c;我们还是选用NodeJS插件&#xff1a; &#xff08;1&#xff09;可以加载任意npmrc文件&#xff1b; &#xff08;2&#x…

鸿蒙NEXT出现有前途吗?是否会和安卓、IOS开发历程一样?

只要有手机操作系统这玩意存在&#xff0c;一定是需要原生开发人员的&#xff0c;但随着独立操作系统越来越多的话&#xff0c;混合App开发可能是个“万能解决方案”。 2024年&#xff0c;在中国&#xff0c;被各大媒体和开发者称为“鸿蒙元年”。 在2023年底就有业内人士透露…

【es6】Map 和 Object 对象的区别

对象 Object Object 是一个特殊的对象&#xff0c;它本身是一个顶级对象&#xff0c;同时还是一个构造函数&#xff0c;还可以使用字面量的方式声明一个对象本质上是键值对的集合&#xff0c;但是健只能是字符串 或 Symbol使用 . [] 去获取object 的属性&#xff0c;不存在则…

jenkins编译使用nohup部署进程到后台失败,解决方法

在shell脚本中加入BUILD_IDdontKillMe server为二进制文件 #!/bin/bashBUILD_IDdontKillMenohup ./server & 原理&#xff1a;jenkins默认会在构建完成后杀掉构建过程中shell命令触发的衍生进程。jenkins根据BUILD_ID识别某个进程是否为构建过程的衍生进程&#xff0c;故…