Vue3【十一】08使用toRefs和toRef

08使用toRefs和toRef

toRefs()函数将person对象中的name和age属性转换为响应式引用,并返回一个对象,对象中的name和age属性都是响应式引用,具有响应式功能。
toRef()函数将person对象中的name属性转换为响应式引用,并返回一个响应式引用,具有响应式功能。

案例截图

使用oRefs和toRef

目录结构

在这里插入图片描述

代码

Person.vue


<template><div class="person"><h1>我是 Person 组件</h1><h2>名字:{{ person.name }}</h2><h2>数量:{{ person.age }} </h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showAdd">查看信息</button></div>
</template><script lang="ts" setup>
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
import { reactive,ref,toRef,toRefs } from 'vue'
// 数据
let person = reactive({name: '太上老君',age: 18000,add: '兜率宫。兜率宫位于江西省鹰潭市的龙虎山,是道教的重要圣地之一。它被认为是太上老君的道场,位于离恨天之上,是道教神话中兜率天宫的一部分。兜率宫原址位于龙虎山天门山,有着悠久的历史和文化背景。',
})// let {name,age} = person //直接解构的变量name和age没有响应式功能,只是单纯的变量 
// console.log(name,age)// let {name,age} = toRefs(person)   // toRefs()函数将person对象中的name和age属性转换为响应式引用,并返回一个对象,对象中的name和age属性都是响应式引用,具有响应式功能。
// console.log(name,age)let name = toRef(person,'name') // toRef()函数将person对象中的name属性转换为响应式引用,并返回一个响应式引用,具有响应式功能。
console.log(name)
console.log(person)// 方法
function showAdd() {alert(person.add)
}
function changeName() {// person.name = person.name == "太上老君" ? '孙悟空' : '太上老君'name.value = name.value == "太上老君" ? '孙悟空' : '太上老君'console.log(name.value)
}
function changeAge() {person.age += 1console.log(person.age)
}
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>

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

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

相关文章

海南聚广众达电子商务咨询有限公司正规吗?

在数字经济的浪潮下&#xff0c;海南聚广众达电子商务咨询有限公司凭借其对抖音电商领域的深刻洞察和专业服务&#xff0c;成为引领行业新风尚的佼佼者。公司不仅具备丰富的电商运营经验&#xff0c;更有一支高效、创新的团队&#xff0c;致力于为品牌商家提供全方位的电商解决…

ThingsKit:智能物联网平台的创新者

在数字化浪潮的推动下&#xff0c;物联网&#xff08;IoT&#xff09;正在迅速改变我们的生活和工作方式。ThingsKit&#xff0c;一个领先的物联网平台&#xff0c;致力于通过其创新的技术和服务&#xff0c;为用户提供一个全面、灵活且易于使用的解决方案。 核心特点 设备连接…

MyBatisPlus插件生成代码

文章目录 概要安装插件使用插件 概要 MyBatis-Plus 是 MyBatis 的增强工具&#xff0c;旨在简化 MyBatis 的开发。MyBatis-Plus 代码生成器插件可以自动生成项目中常见的代码&#xff0c;如实体类、Mapper 接口、Service 接口和实现类、Controller 等&#xff0c;从而减少手动…

FreeSurFer的recon-all处理流——学习记录

官方网址&#xff1a;ReconAllTableStableV6.0 - Free Surfer Wiki &#xff08;1&#xff09;颅骨剥离skullstrip 颅骨剥离后生成文件&#xff1a;/mri/brainmask.mgz &#xff08;2&#xff09;图像配准canorm Freesurfer图像配准&#xff1a;将 mri/nu.mgz 体积与 FREESU…

SpringBoot+Vue学生作业管理系统【附:资料➕文档】

前言&#xff1a;我是源码分享交流Coding&#xff0c;专注JavaVue领域&#xff0c;专业提供程序设计开发、源码分享、 技术指导讲解、各类项目免费分享&#xff0c;定制和毕业设计服务&#xff01; 免费获取方式--->>文章末尾处&#xff01; 项目介绍047&#xff1a; 【…

面试高频问题----6

一、String、StringBuffer、StringBuilder 1.String&#xff1a; ***string类是java中用于表示不可变字符序列的类。 ***string对象是不可变的&#xff0c;一旦创建&#xff0c;其值就不能被改变。每次对string对象的修改操作都会生成一个新的string对象。 ***由于string的…

MTK7621+MT7603+MT7613 RF定频测试方法

1、从下面网址下载QA软件包&#xff0c;然后在WIN系统下安装QA环境。https://download.csdn.net/download/zhouwu_linux/89408518 在WINDOWS 7系统下先安装WinPcap_4_1_3.exe。 2、电脑先连接仪器&#xff0c;主板网络与电脑连接并接12V 2V的电源。模组默认的IP&#xff1a;10…

天才程序员周弈帆 | Stable Diffusion 解读(一):回顾早期工作

本文来源公众号“天才程序员周弈帆”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;Stable Diffusion 解读&#xff08;一&#xff09;&#xff1a;回顾早期工作 在2022年的这波AI绘画浪潮中&#xff0c;Stable Diffusion无疑是最…

【故障诊断】基于改进型的节点重构小波包频带能量谱结合概率神经网络 PNN实现轴承联合故障诊断

研究内容: 基于改进型的节点重构小波包频带能量谱结合概率神经网络(PNN)的轴承联合故障诊断研究旨在开发一种有效的方法来识别轴承故障。该方法结合了节点重构小波包频带能量谱和PNN模型,以提高轴承故障诊断的准确性和可靠性。 研究路线: 文献综述:对相关领域的文献进行…

并行处理的题目:

问题定义 给定一个字符串数组&#xff0c;将所有字符串分组&#xff0c;每一组的字符串包含的字符相同但是顺序不同。 如&#xff1a; 输入: ["eat", "tea", "tan", "ate", "nat", "bat"], 输出: [ ["ate&qu…

C++面向对象程序设计 - 字符串流

文件流是以外存文件为输入输出对象的数据流&#xff0c;字符串流不是以外存文件为输入输出的对象&#xff0c;而以内存中用户定义的字符数组&#xff08;字符串&#xff09;为输入输出的对象&#xff0c;即将数据输出到内存中的字符数组&#xff0c;或者从字符数组&#xff08;…

探索Linux中的dbus-binding-tool:理解其用途与用法

探索Linux中的dbus-binding-tool&#xff1a;理解其用途与用法 在Linux系统中&#xff0c;D-Bus是一个消息总线系统&#xff0c;它允许应用程序之间发送和接收消息。这种机制对于实现进程间通信&#xff08;IPC&#xff09;和系统服务集成非常有用。其中&#xff0c;dbus-bind…

特别名词Test Paper2

特别名词Test Paper2 cabinet 橱柜cable 电缆&#xff0c;有线电视cafe 咖啡厅cafeteria 咖啡店&#xff0c;自助餐厅cage 笼子Cambridge 剑桥camel 骆驼camera 相机camp 露营campus 校园candidate 候选人&#xff0c;考生candle 蜡烛canteen 食堂capital 资金&#xff0c;首都…

《中国数据库年度行业分析报告》节选:数据库关键技术及发展趋势

墨天轮于5月29日正式发布 《2023年中国数据库年度行业分析报告》&#xff0c;总结梳理了中国数据库行业的技术演进及趋势。作为云上数据库和数据计算领域的领先者&#xff0c;拓数派受邀参与创作&#xff0c;联合编写了《AI 时代下新一代数据仓库的演进》《从数据库到数据计算系…

VMware导入小白分享的MacOS版本之后,无法开机的解决方案

前言 这段时间陆续有小伙伴找到小白&#xff0c;说&#xff1a;导入小白分享的MacOS版本之后&#xff0c;出现无法开机的问题。 遇到这个问题&#xff0c;并不是说明分享版本有问题&#xff0c;因为大部分小伙伴导入之后都没有出现类似的问题&#xff0c;都是导入之后开机&…

unity中常见的角色控制方法

使用物理引擎&#xff08;如 Rigidbody&#xff09;来控制角色 using UnityEngine;public class PlayerController : MonoBehaviour {public float moveSpeed 5f;public float jumpForce 5f;private Rigidbody rb;private bool isGrounded;void Start(){// 获取角色的 Rigid…

NVeloDocx一个基于NVelocity的word模版引擎

NVeloDocx是一个基于NVelocity的Word模版引擎&#xff0c;目前主要是用于E6低代码开发平台供用户轻松制作各种Word报告模版。 有以下优点&#xff1a; 1、完全的NVelocity语法&#xff1b; 2、直接在Word中写NVelocity脚本&#xff0c;使用非常非常方便&#xff1b; 3、完全兼…

SOA设计的标准要求

1.文档标准化 SOA服务具有平台独立的自我描述XML文档。Web服务描述语言是用于描述服务的标准语言。 2.通信协议标准 SOA服务用消息进行通信&#xff0c;该消息通常使用XML Schema来定义&#xff08;也称作XSD&#xff0c;XML Schema Definition&#xff09;。消费者和提供者&a…

数据集笔记:DGraph 大规模动态图数据集

dgraph-web (xinye.com) 1 数据集介绍 DGraph 是一个有向无权的动态图&#xff0c;包含超过 370 万个节点以及 430 万条动态边DGraph 中的节点表示金融借贷用户&#xff0c;有向边表示紧急联系人关系&#xff0c;每个节点包含脱敏后的属性特征&#xff0c;以及表示是否为金融…

C++ STL -算法

目录 前言: 一. sort() 二.find() 三. for_each() 四. size() 五.copy() 六. 总结 前言: STL 算法是基于模板实现的&#xff0c;可用于不同类型的容器。 意义和作用&#xff1a; 提高代码的可复用性和可维护性.减少代码量&#xff0c;提高开发效率.提供高效、可靠的实…