【vue】toRef,toRefs

  • toRef:把一个 响应式对象 转换为对应的ref变量
  • toRefs:把一个 响应式对象 转换为对应的ref对象

在这里插入图片描述

代码

<template>
  <P>mname: {{ mname }} </P>
  <P>mage: {{ mage }} </P>
  <P>msex: {{ msex }} </P>
  <P>mhobby: {{ mhobby }} </P>
  <hr>
  <P>mname1: {{ mname1 }} </P>
  <P>mage1: {{ mage1 }} </P>
  <P>msex1: {{ msex1 }} </P>
  <P>mhobby1: {{ mhobby1 }} </P>
  <hr>
  <P>hobby1: {{ mman }} </P>

</template>

<script setup>
import { reactive, ref, toRef, toRefs } from 'vue';

let man = reactive({
  name: 'cxk',
  age: 25,
  sex: '男',
  hobby: ['唱', '跳', 'rap']
});

const mname = toRef(man, 'name');
const mage = toRef(man, 'age');
const msex = toRef(man, 'sex');
const mhobby = toRef(man, 'hobby');
//解构
const { name: mname1, age: mage1, sex: msex1, hobby: mhobby1 } = toRefs(man);

const mman = toRefs(man);

console.log(mname, mage, msex, mhobby);
console.log(mname1, mage1, msex1, mhobby1);
console.log(mman);
</script>

<style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

fastjson 序列化问题

问题: 使用fastjson 的 对同一个JSONObject对象 多次引用后, 通过 JSON.toJSONString() 方法进行json序列化时出现只有第一次的可以成功序列化未json string 字符串, 后面的对象都为引用地址; 示例: public static void main(String[] args) {JSONObject jsonObject new JSON…

2024最新信息系统项目管理师--(1抵100)真题考过的十大管理点(细致)

备注&#xff1a; 1.这里将汇总所有管理的输入、输出、使用的工具 2.对真题考过的点&#xff0c;将会标红处理&#xff0c;并进行细致说明 3. 针对最新的改版点&#xff0c;用绿色标记 信息系统项目管理师第4版&#xff08;5大过程、10大管理&#xff09; 十大管理启动过程组…

CVPR‘24| Leap-of-Thought! 中大/哈佛等提出CLoT探究大模型幽默创新响应

Leap-of-Thought! 中大/哈佛等提出CLoT探究大模型幽默创新响应 什么是“大喜利”创新响应游戏&#xff1f;为什么考虑“大喜利”游戏&#xff1f;性能结果展示激发创造力的思维方式Leap-of-Thought (LoT)通向LoT! 激发创造力的训练方法CLoT性能评估总结 (导读) 多模态大模型具备…

【Java系列】SpringCloudAlibaba统一返回体及全局异常捕获实现

本文将以实际代码展示如何实现SpringCloudAlibaba的统一返回体及全局异常捕获。 作者&#xff1a;后端小肥肠 1. 前言 在构建微服务应用时&#xff0c;统一返回体和异常捕获机制的设计对于保持代码的整洁性和提高服务的可维护性至关重要。特别是在使用 Spring Boot 和 Spring …

数据结构初阶:二叉树(一)

树概念及结构 树的概念 树是一种 非线性 的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的 。 有一个特殊的结点&a…

1688商品详情接口技术深探:解锁电商数据新纪元,实现业务自动化飞跃

1688商品详情接口技术解析 一、引言 随着电子商务的快速发展&#xff0c;越来越多的企业开始关注如何利用API接口获取商品详情信息&#xff0c;以实现数据的自动化处理和业务的快速拓展。1688作为国内知名的B2B电商平台&#xff0c;其商品详情接口成为了众多企业关注的焦点。…

HarmonyOS鸿蒙端云一体化开发--适合小白体制

端云一体化 什么是“端”&#xff0c;什么是“云”&#xff1f; 答&#xff1a;“端“&#xff1a;手机APP端 “云”:后端服务端 什么是端云一体化&#xff1f; 端云一体化开发支持开发者在 DevEco Studio 内使用一种语言同时完成 HarmonyOS 应用的端侧与云侧开发。 …

AI预测体彩排3第3弹【2024年4月14日预测--第1套算法开始计算第3次测试】

今天咱们继续测试第1套算法和模型&#xff0c;今天是第3次测试&#xff0c;目前的测试只是为了记录和验证&#xff0c;不建议大家盲目跟买。我的目标仍旧是10次命中3-4次!~废话不多说了&#xff0c;直接上结果&#xff01; 2024年4月14日排3的七码预测结果如下 第一套&…

LLM 推理优化探微 (4) :模型性能瓶颈分类及优化策略

编者按&#xff1a; 在人工智能浪潮袭卷全球的大背景下&#xff0c;进一步提升人工智能模型性能&#xff0c;满足更多应用需求已经刻不容缓。如何优化模型延迟和吞吐量&#xff0c;成为了业界亟待解决的重要问题。 我们今天为大家带来的这篇文章&#xff0c;其观点为&#xff1…

C语言中的文件操作

C语言中的文件操作 1、文件的打开 创建文件指针变量 File* pf;定义一个指向FILE类型数据的指针变量&#xff0c;可以使pf指向某个文件的文件信息区&#xff0c;通过文件指针变量就能够找到与它关联的文件 &#xff08;1&#xff09;文件的打开 使用fopen函数打开文件&#…

基于Springboot的餐厅点餐系统

基于SpringbootVue的餐厅点餐系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 首页展示 菜品详情页 菜品信息 个人中心 后台管理 菜品信息管理 用户管理 菜…

less+rem+媒体查询布局(主流)

rem适配布局 一.rem基础二.媒体查询1.概念2.语法&#xff08;1&#xff09;.mediatype查询类型&#xff08;2&#xff09;.关键字&#xff08;3&#xff09;.媒体特性&#xff08;4&#xff09;.应用 3.媒体查询rem实现元素动态大小变化4.引入资源&#xff08;针对不同媒体查询…

【系统分析师】需求工程☆

文章目录 0、需求工程概述1、需求的分类2、需求获取3、需求分析3.1 结构化需求分析-SA3.1.1DFD- 数据流图3.1.2 STD-状态转换图3.1.3 ER图-实体联系图 3.2 面向对象需求分析-OOA3.2.1 工具-UML图3.2.2 UML分类3.2.3 用例图 ☆3.2.4 类图 / 对象图 ☆3.2.5 顺序图3.2.6 活动图3.…

斐尔玫瑰荣获《中国3.15诚信企业》证书,诚信经营赢得社会认可

2024年&#xff0c;斐尔玫瑰&#xff0c;荣获了备受瞩目的《中国3.15诚信企业》证书。这一荣誉的获得&#xff0c;不仅是对斐尔玫瑰长期以来坚持诚信经营、提供优质产品和服务的肯定&#xff0c;更是对其在消费者心目中建立起的良好信誉和口碑的认可。 斐尔玫瑰作为女性私密护…

自动化测试之httprunner框架hook函数实操

本篇介绍httprunner中hook函数的使用&#xff0c;以及通过编程能力实现建设自动化测试更全面的场景覆盖 前置&#xff1a; 互联网时代让我们更快的学习到什么是Httprunner 正文&#xff1a; 经过上文了解到这个框架怎么使用之后&#xff0c;我们开始来探讨一下我们为什么要用…

MySQL分区表(14/16)

分区表 基本概述 分区表是数据库中一种用于优化大型表数据管理和查询性能的技术。它将一个表的数据根据特定的规则或条件分割成多个部分&#xff0c;每个部分称为一个分区。每个分区可以独立于其他分区进行存储、管理和查询&#xff0c;这样可以提高数据处理的效率&#xff0…

mybatis(9)-逆向工程+PageHelper+注解方式开发

最后一篇&#xff01;&#xff01; 1、逆向工程1.1、普通版1.2、增强版 2、PageHelper2.1 limit2.2 插件 3、注解开发3.1 Insert3.2Delete3.3 Update3.4 Select Results 1、逆向工程 1.1、普通版 所谓的逆向工程是&#xff1a;根据数据库表逆向生成Java的pojo类&#xff0c;S…

智过网:注册安全工程师注册有效期与周期解析

在职业领域&#xff0c;各种专业资格认证不仅是对从业者专业能力的认可&#xff0c;也是保障行业安全、规范发展的重要手段。其中&#xff0c;注册安全工程师证书在安全生产领域具有举足轻重的地位。那么&#xff0c;注册安全工程师的注册有效期是多久呢&#xff1f;又是几年一…

伺服系统中滤波器算法的工程实现方案

此文章主要致力于描述如何将伺服驱动系统中的数字滤波器用编程语言来实现。

【动态规划 区间dp 位运算】100259. 划分数组得到最小的值之和

本文涉及知识点 动态规划 区间dp 位运算 LeetCode100259. 划分数组得到最小的值之和 给你两个数组 nums 和 andValues&#xff0c;长度分别为 n 和 m。 数组的 值 等于该数组的 最后一个 元素。 你需要将 nums 划分为 m 个 不相交的连续 子数组&#xff0c;对于第 ith 个子数…