Vue3的ref和reactive

目录

1、ref的基本使用

2、reactive的基本使用

3、ref操作dom

4、ref与reactive的异同


1、ref的基本使用

ref创建数据可以是基本类型也可以是引用类型

ref函数创建响应式数据,返回值是一个对象

模版中使用ref数据,省略.value,js代码中不能省略

获取ref创建数据的值要加上.value

<script setup>
// ref函数创建响应式数据,返回值是一个对象
// 模版中使用ref数据,省略.value,js代码中不能省略
import { ref } from 'vue'
const obj =ref({name: '北京',desc: '政治文化中心'
})
// 修改城市的方法
const change = () => {obj.value.name = '上海'
}
</script><template><div>Hello Vue3</div><p>城市 {{ obj.name }}</p><button @click="change">修改城市</button>
</template><style scoped></style>

2、reactive的基本使用

 

reactive创建响应式

reactive函数创建响应式数据,只支持引用数据类型

使用reactive响应式数据的时候,不需要.value

<script setup>
// reactive函数创建响应式数据,只支持引用数据类型
// 使用reactive响应式数据的时候,不需要.valueimport { reactive } from 'vue'
const user = reactive({name: 'admin',pwd: '123456'
})
const changeUserName = () => {user.name = 'admin666' 
}
</script><template><div>Hello Vue3</div><p>姓名 {{ user.name }}</p><button @click="changeUserName">修改姓名</button>
</template><style scoped></style>

 

3、ref操作dom

1、创建ref对象,将该对象作为ref的值

2、想获取谁,就再谁的标签上添加ref,其ref=‘ref对象’

 

<script setup >import {ref} from 'vue'
// 创建ref对象
const eleref=ref()
const changeBackgroundColor=()=>{
eleref.value.style.backgroundColor='pink'
}</script><template>
<div>hello,world</div>
<!-- ref='ref对象' -->
<p ref="eleref">pppp</p>
<button @click="changeBackgroundColor"> 改变背景色</button></template><style scoped></style>

4、ref与reactive的异同

  1. 相同点 : 都可以创建响应式数据

  2. 不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型

  • ref通过.value获取数据,reactive不需要.value

  • ref创建响应式引用数据类型低层依赖reactive

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

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

相关文章

i18n多国语言Internationalization的动态实现

一、数据动态的更新 在上一篇i18n多国语言Internationalization的实现-CSDN博客&#xff0c;可能会遇到一个问题&#xff0c;我们在进行英文或中文切换时&#xff0c;并没有办法对当前的数据进行动态的更新。指的是什么意思呢&#xff1f;当前app.js当中一个组件内容&#xff…

Go语言学习笔记:基础语法和类型

Go语言学习笔记&#xff1a;基础语法和类型 目录 Go语言学习笔记&#xff1a;基础语法和类型学习路线前言变量声明常量数据类型布尔型&#xff08;Boolean&#xff09;整型&#xff08;Integer&#xff09;浮点型&#xff08;Floating point&#xff09;复数型&#xff08;Comp…

LeetCode.2765. 最长交替子数组

题目 2765. 最长交替子数组 分析 为了得到数组 nums 中的最长交替子数组的长度&#xff0c;需要分别计算以每个下标结尾的最长交替子数组的长度。为了方便处理&#xff0c;计算过程中需要考虑长度等于 1 的最长交替子数组&#xff0c;再返回结果时判断最长交替子数组的长度…

【代码整理】COCO格式数据集画框

可以用于排查数据集转化后可能出现的坐标错误&#xff0c;类别不对齐等需要可视化才能发现的问题 import部分 from pycocotools.coco import COCO import numpy as np import os from PIL import Image from matplotlib.collections import PatchCollection from matplotlib.…

详细分析Java中的Date类以及格式转换

目录 前言1. 基本知识2. 格式化输出3. 格式转换 前言 记录这篇文章的缘由&#xff0c;主要是涉及一个格式转换&#xff0c;对此深挖了这个类 在Java中&#xff0c;Date类是用于表示日期和时间的类。 位于java.util包中&#xff0c;是Java平台中处理日期和时间的基本类之一。…

路由器结构

路由器是连接互联网的设备&#xff0c;本文主要描述路由器的结构组成。 如上所示&#xff0c;OSI&#xff08;Open System Interconnect&#xff09;开放系统互联参考模型是互联网架构的标准协议栈&#xff0c;由ISO标准组织制定。自底向上&#xff0c;互联网架构分为7层&#…

服务器与Ajax

1.初识Ajax Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 术语ajax最早产生于2005年&#xff0c;Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)&#xff0c;但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技…

从零开始:Ubuntu Server中MySQL 8.0的安装与Django数据库配置详解

Ubuntu系统纯净安装MySQL8.0 1、安装Mysql8.0 sudo apt install mysql-server2、检查MySQL状态 sudo systemctl status mysql如下所示看见Active: active (running)说明mysql状态正常 ● mysql.service - MySQL Community ServerLoaded: loaded (/lib/systemd/system/mysql…

Docker镜像操作

镜像名称 镜名称一般分两部分组成&#xff1a;[repository]:[tag]。 在没有指定tag时&#xff0c;默认是latest&#xff0c;代表最新版本的镜像。 这里的mysql就是repository&#xff0c;5.7就是tag&#xff0c;合一起就是镜像名称&#xff0c;代表5.7版本的MySQL镜像。 镜像…

svn checkout 无法使用,没有响应 svn: E170013

在linux mint 下使用 svn&#xff0c; 配合vscode SVN 插件。 一直没出现过问题。 这次在 Mac mini 上使用就是一直链接&#xff0c;最后超时 time out 。 当然ping ip 也是超时。 svn: E170013: Unable to connect to a repository at URL svn://192.168.0.220/project svn…

YOLOv8改进 | 损失函数篇 | QualityFocalLoss质量焦点损失(含代码 + 详细修改教程)

一、本文介绍 本文给大家带来的改进机制是QualityFocalLoss,其是一种CLS分类损失函数,它的主要创新是将目标的定位质量(如边界框与真实对象的重叠度量,例如IoU得分)直接融合到分类损失中,形成一个联合表示。这种方法能够解决传统目标检测中分类与定位任务之间存在的不一…

计算机网络(第六版)复习提纲7

SS2.4 信道复用技术&#xff08;填空简答&#xff09; 1.信道复用概念&#xff1a; a)复用&#xff1a;允许用户使用一个共享信道进行通信&#xff0c;发送方复用&#xff08;多合一&#xff09;&#xff0c;接收方分用&#xff08;一分多&#xff09; 2.频分复用FDM&#xff1…

js组合继承例子和优缺点

JavaScript中的组合继承是一种将原型链继承和拷贝继承结合起来实现继承的方式。它通过拷贝继承将父类的属性和方法复制到子类中&#xff0c;并利用原型链继承实现多态性和继承链。 下面是一个组合继承的例子&#xff1a; function Parent() { this.name Parent; } Parent.…

Sentinel限流规则支持流控效果

流控效果是指请求达到流控阈值时应该采取的措施&#xff0c;包括三种&#xff1a; 1.快速失败&#xff1a;达到阈值后&#xff0c;新的请求会被立即拒绝并抛出FlowException异常。是默认的处理方式。 2.warm up&#xff1a;预热模式&#xff0c;对超出阈值的请求同样是拒绝并抛…

flink1.18 广播流 The Broadcast State Pattern 官方案例scala版本

对应官网 https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance/broadcast_state/ 测试数据 * 广播流 官方案例 scala版本* 广播状态* https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance…

css初始化(不应该固定)

1&#xff09;对边框 margin:0padding:0 2)图片去边框 这个得看浏览器了&#xff0c;有的浏览器是带边框的 img {border:none;} 3)清除 ul ol 前的小点 ul,ol {list-style:none; } 4)input input {padding-top:0;padding-bottom:0;boder:none; } 5) 去掉a标签的下滑线…

风二西CTF流量题大集合-刷题笔记|NSSCTF流量题(1)

2.[鹤城杯 2021]流量分析 flag{w1reshARK_ez_1sntit} 3.[CISCN 2023 初赛]被加密的生产流量 c1f_fi1g_1000 4.[GKCTF 2021]签到 flag{Welc0me_GkC4F_m1siCCCCCC!} 5.[闽盾杯 2021]Modbus的秘密 flag{HeiDun_2021_JingSai} 6.[LitCTF 2023]easy_shark 7.[CISCN 2022 初赛]ez…

opencv#29 图像噪声的产生

在上一节的图像卷积我们了解到图像卷积可以用于去除图像中的噪声&#xff0c;那么对于现实生活中每一张采集到的图像都会包含噪声&#xff0c;也就是我们通过相机无法得到不包含噪声的图像&#xff0c;如果我想衡量噪声去除能力的强弱&#xff0c;就必须在一张不含噪声的图像中…

瑞_力扣LeetCode_104. 二叉树的最大深度

文章目录 题目 104. 二叉树的最大深度题解后序遍历 递归实现后序遍历 迭代实现层序遍历 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《刷题》的力扣LeetCode系列&#xff0c;主要以力扣LeetCode网的题进行解析与分享。本文仅供大家交流、学习及研究使用&#xff0c;禁…

【NVIDIA】Jetson Orin Nano系列:Qt+Gstreamer(01)pro中配置gstreamer库和头文件路径

1、安装头文件和库 本人烧写的Ubuntu22.0版本,文件系统已有相关头文件,如果没有可以使用下面的命令安装 sudo apt install libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libgstreamer-plugins-good1.0-dev2、pro配置头文件路径和库 QT += core gui greate…