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

Vue3_04_ref 函数和 reactive 函数

ref 函数

  • 声明变量时,赋值的值要写在 ref() 函数中
  • 修改变量时,变量名.value = xxx
  • 在模板中使用时可以省略掉 .value,直接使用变量名即可

<template><h1>一个人的信息</h1><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>工作种类:{{job.type}}</h2><h2>薪资:{{job.salary}}</h2><button @click="changeInfo">修改人的信息</button>
</template><script>import {ref} from 'vue'export default {name: 'App',setup(){//数据let name = ref('张三')let age = ref(18)let job = ref({type:'前端工程师',salary:'30k'})//方法function changeInfo(){name.value = '李四'age.value = 20job.value.type = '后端工程师'job.value.salary = '50k'console.log(name,age)}//返回一个对象(常用)return {name,age,changeInfo,job}//返回一个渲染函数(了解)// return ()=>h('h1','你好吗')}}
</script>

 reactive 函数

代码优化:

reactie 对比 ref

 

相关文章:

Vue3_04_ref 函数和 reactive 函数

ref 函数 声明变量时&#xff0c;赋值的值要写在 ref() 函数中修改变量时&#xff0c;变量名.value xxx在模板中使用时可以省略掉 .value&#xff0c;直接使用变量名即可 <template><h1>一个人的信息</h1><h2>姓名&#xff1a;{{name}}</h2><…...

05 Ubuntu下安装.deb安装包方式安装vscode,snap安装Jetbrains产品等常用软件

使用deb包安装类型 deb包指的其实就是debian系统&#xff0c;ubuntu系统是基于debian系统的发行版。 一般我们会到需要的软件官网下载deb安装包&#xff0c;然后你既可以采用使用“软件安装”打开的方法来进行安装&#xff0c;也可以使用命令行进行安装。我推荐后者&#xff…...

性能测试jmeter连接数据库jdbc(sql server举例)

一、下载第三方工具包驱动数据库 1. 因为JMeter本身没有提供链接数据库的功能&#xff0c;所以我们需要借助第三方的工具包来实现。 &#xff08;有这个jar包之后&#xff0c;jmeter可以发起jdbc请求&#xff0c;没有这个jar包&#xff0c;也有jdbc取样器&#xff0c;但不能发起…...

8.3 C高级 Shell脚本

写一个脚本&#xff0c;包含以下内容&#xff1a; 显示/etc/group文件中第五行的内容创建目录/home/ubuntu/copy切换工作路径到此目录赋值/etc/shadow到此目录&#xff0c;并重命名为test将当前目录中test的所属用户改为root将test中其他用户的权限改为没有任何权限 #!/bin/b…...

2023年华数杯A题

A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前&#xff0c;由单根隔热材料 A 纤维编织成的织物&#xff0c;其热导率可以直接测出&#xff1b;但是 单根隔热材料 A 纤维…...

【零基础学Rust | 基础系列 | 函数,语句和表达式】函数的定义,使用和特性

文章标题 简介一&#xff0c;函数1&#xff0c;函数的定义2&#xff0c;函数的调用3&#xff0c;函数的参数4&#xff0c;函数的返回值 二&#xff0c;语句和表达式1&#xff0c;语句2&#xff0c;表达式 总结&#xff1a; 简介 在Rust编程中&#xff0c;函数&#xff0c;语句…...

加解密算法+压缩工具

sha256 工具类 package com.fanghui.vota.packages.util;import org.slf4j.Logger; import org.slf4j.LoggerFactory;import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.math.BigInteger…...

FeignClient接口的几种方式总结

FeignClient这个注解&#xff0c;已经封装了远程调用协议。在springboot的开发&#xff0c;或者微服务的开发过程中&#xff0c;我们需要跨服务调用&#xff0c;或者调用外部的接口&#xff0c;我们都可以使用FeignClient。 一、FeignClient介绍 FeignClient 注解是 Spring Cl…...

springBoot多数据源使用tdengine(3.0.7.1)+MySQL+mybatisPlus+druid连接池

一、安装部署 1、我这里使用的 3.0.7.1版本&#xff0c;因为我看3.x版本已经发布了一年了&#xff0c;增加了很多新的功能&#xff0c;而且3.x官方推荐&#xff0c;对于2.x的版本&#xff0c;官网都已经推荐进行升级到3.x&#xff0c;所以考虑到项目以后的发展&#xff0c;决定…...

剑指Offer 05.替换空格

剑指Offer 05.替换空格 目录 剑指Offer 05.替换空格05.替换空格题目代码&#xff08;容易想到的&#xff09;利用库函数的方法题解&#xff08;时间复杂度更低&#xff09;面试&#xff1a;为什么java中String类型是不可变的 05.替换空格 题目 官网题目地址 代码&#xff08;…...

ChatGPT的功能与特点

随着人工智能技术的不断发展&#xff0c;ChatGPT作为OpenAI公司开发的基于GPT-3.5架构的大型语言模型&#xff0c;正引领着智能交互的新纪元。ChatGPT的功能与特点使其能够在多个领域展现出惊人的能力&#xff0c;本文将深入探讨ChatGPT的功能与特点&#xff0c;以及它在人工智…...

Vue2.0基础

1、概述 Vue(读音/vju/&#xff0c;类似于view)是一套用于构建用户界面的渐进式框架&#xff0c;发布于2014年2月。与其它大型框架不同的是&#xff0c;Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff08;也就是可以理解为HTMLCSSJS&#xff09;&#xff…...

rust 如何定义[u8]数组?

在Rust中&#xff0c;有多种方式可以定义 [u8] 数组。以下是一些常见的方式&#xff1a; 使用数组字面量初始化数组&#xff1a; let array: [u8; 5] [1, 2, 3, 4, 5];使用 vec! 宏创建可变长度的数组&#xff1a; let mut vec: Vec<u8> vec![1, 2, 3, 4, 5];使用 v…...

关于Hive的使用技巧

前言 Hive是一个基于Hadoop的数据仓库基础架构&#xff0c;它提供了一种类SQL的查询语言&#xff0c;称为HiveQL&#xff0c;用于分析和处理大规模的结构化数据。 Hive的主要特点包括&#xff1a; 可扩展性&#xff1a;Hive可以处理大规模的数据&#xff0c;支持高性能的并行…...

【C++】BSTree 模拟笔记

文章目录 概念插入和删除非递归实现中的问题递归中的引用简化相关OJ复习直达 概念 由下面二叉搜索树的性质可以知道&#xff0c;中序遍历它便可以得到一个升序序列&#xff0c;查找效率高&#xff0c;小于往左找&#xff0c;大于往右走。最多查找高度次&#xff0c;走到到空&am…...

5分钟快手入门laravel邮件通知

第一步&#xff1a; 生成一个邮件发送对象 php artisan make:mail TestMail 第二步&#xff1a; 编辑.env 添加/修改&#xff08;没有的key则添加&#xff09; MAIL_DRIVERsmtp MAIL_HOSTsmtp.163.com &#xff08;这里用163邮箱&#xff09; MAIL_PORT25 &#xff08;163邮箱…...

iOS——Block two

Block 的实质究竟是什么呢&#xff1f;类型&#xff1f;变量&#xff1f;还是什么黑科技&#xff1f; Blocks 是 带有局部变量的匿名函数 Blocks 由 OC 转 C 源码方法 在项目中添加 blocks.m 文件&#xff0c;并写好 block 的相关代码。打开「终端」&#xff0c;执行 cd XX…...

Ubuntu出现内部错误解决办法

使用的Ubuntu版本是18.04&#xff0c;使用的时候弹出对话框说出现了内部错误&#xff0c;好奇是哪里出现了错误&#xff0c;查找了一下解决的办法&#xff0c;记录一下。 参考解决方案&#xff1a;ubantu出现了内部错误 一旦程序崩溃过一次&#xff0c;就会生成一个.crash文件…...

2023年中职组“网络安全”赛项吉安市竞赛任务书

2023年中职组“网络安全”赛项 吉安市竞赛任务书 一、竞赛时间 总计&#xff1a;360分钟 竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略配置 A-3 流量完整性保护 A-4 事件监控 A-5 服务加固…...

ELK日志分析系统介绍及搭建(超详细)

目录 一、ELK日志分析系统简介 二、Elasticsearch介绍 2.1Elasticsearch概述 三、Logstash介绍 四、Kibana介绍 五、ELK工作原理 六、部署ELK日志分析系统 6.1ELK Elasticsearch 集群部署&#xff08;在Node1、Node2节点上操作&#xff09; 6.2部署 Elasticsearch 软件 …...

Cursor Free VIP架构解析:多平台机器标识重置机制深度剖析

Cursor Free VIP架构解析&#xff1a;多平台机器标识重置机制深度剖析 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your…...

B站字幕下载终极指南:3分钟掌握高效字幕处理技巧

B站字幕下载终极指南&#xff1a;3分钟掌握高效字幕处理技巧 【免费下载链接】BiliBiliCCSubtitle 一个用于下载B站(哔哩哔哩)CC字幕及转换的工具; 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBiliCCSubtitle 还在为B站视频的字幕下载而烦恼吗&#xff1f;&#…...

别再只盯着原理了!用TensorRT INT8量化你的YOLOv5模型,实测推理速度翻倍(附完整C++代码)

实战指南&#xff1a;用TensorRT INT8量化加速YOLOv5模型推理&#xff08;附完整C实现&#xff09; 当你在深夜调试模型时&#xff0c;是否经历过这样的场景——模型精度达标了&#xff0c;但推理速度却像蜗牛爬行&#xff1f;部署到边缘设备时&#xff0c;显存占用直接爆表&am…...

Flutter环境搭建保姆级避坑指南:从Flutter Doctor红叉到全绿勾的完整排错流程

Flutter环境搭建保姆级避坑指南&#xff1a;从Flutter Doctor红叉到全绿勾的完整排错流程 刚接触Flutter开发时&#xff0c;最令人沮丧的莫过于按照官方文档一步步操作后&#xff0c;运行flutter doctor却看到满屏红色叉号和黄色叹号。作为过来人&#xff0c;我完全理解这种挫…...

保姆级教程:在国产RK3568板卡上从零搭建K3s边缘节点(含国内镜像加速)

国产RK3568板卡实战&#xff1a;从零构建高性能K3s边缘节点全指南 当RK3568遇上K3s&#xff0c;会擦出怎样的火花&#xff1f;这款国产四核ARM处理器以其出色的能效比和丰富的接口资源&#xff0c;正在工业网关、边缘计算盒子等领域大放异彩。而K3s作为CNCF官方认证的轻量级Ku…...

实测对比:鲁班猫5跑YOLOv12,比树莓派5快多少?附性能优化小技巧

鲁班猫5 vs 树莓派5&#xff1a;YOLOv12推理性能实测与NPU优化实战 当我们需要在嵌入式设备上部署目标检测模型时&#xff0c;硬件选型往往让人纠结。最近拿到鲁班猫5&#xff08;Rockchip RK3588&#xff09;和树莓派5两款热门开发板&#xff0c;我决定做个深度对比测试&#…...

SQL嵌套查询处理大数据量_内存压力缓解方案

优先改写为JOIN&#xff0c;只查必要字段并加索引&#xff1b;MySQL分页驱动或禁用BNL&#xff0c;PostgreSQL优选EXISTS且带关联条件&#xff1b;复杂场景落地为带索引的临时表。WHERE 子查询太慢&#xff0c;直接爆内存怎么办SQL 嵌套查询在数据量上百万后&#xff0c;WHERE …...

基于认知负荷理论的职场新人算法学习策略:如何循序渐进,避免挫败感。

很多职场新人学算法&#xff0c;卡住的原因并不只是“自己不够聪明”。更常见的情况是&#xff1a;一上来就刷难题、追求速成、同时学太多概念&#xff0c;结果大脑像浏览器开了二十个标签页&#xff0c;越学越乱 &#x1f635;‍&#x1f4ab;从认知负荷理论看&#xff0c;这种…...

SPOOLing 技术(假脱机技术)独占设备 → 虚拟共享设备

一、基础定义与核心定位 SPOOLing 全称&#xff1a;Simultaneous Peripheral Operations On-Line 中文&#xff1a;假脱机技术 一句话核心&#xff1a; 在联机状态下&#xff0c;用软件模拟实现脱机I/O的效果&#xff0c;将低速独占设备虚拟成高速共享设备&#xff0c;让 CPU 与…...

时序抖动:概念、测量与系统设计优化

1. 时序抖动的基础概念与影响机制在数字系统设计中&#xff0c;时序抖动&#xff08;Jitter&#xff09;是指时钟信号边沿相对于理想位置的偏差。这种看似微小的偏差会对系统性能产生深远影响&#xff0c;特别是在高速数据传输和精密信号处理领域。想象一下交响乐团的指挥手势出…...