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的异同
-
相同点 : 都可以创建响应式数据
-
不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型
-
ref通过.value获取数据,reactive不需要.value
-
ref创建响应式引用数据类型低层依赖reactive
相关文章:
Vue3的ref和reactive
目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 1、ref的基本使用 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据,返回值是一个对象 模版中使用ref数据,省略.value,js代码中不能省略 获…...
Flink编程——风险欺诈检测
Flink 风险欺诈检测 文章目录 Flink 风险欺诈检测背景准备条件FraudDetectionJob.javaFraudDetector.java 代码分析执行环境创建数据源对事件分区 & 欺诈检测输出结果运行作业欺诈检测器 欺诈检测器 v1:状态欺诈检测器 v2:状态 时间完整的程序期望的…...
Day37 贪心算法 part06 738. 单调递增的数字 968. 监控二叉树
贪心算法 part06 738. 单调递增的数字 968. 监控二叉树 738. 单调递增的数字 class Solution { public:int monotoneIncreasingDigits(int n) {string strNum to_string(n);int tag strNum.size();for(int i strNum.size()-1; i>1; i--){if(strNum[i]<strNum[i-1]){…...
SpringBoot Redis入门(四)——Redis单机、哨兵、集群模式
单机模式:单台缓存服务器,开发、测试环境下使用;哨兵模式:主-从模式,提高缓存服务器的高可用和安全性。所有缓存的数据在每个节点上都一致。每个节点添加监听器,不断监听节点可用状态,一旦主节点…...
获取数组中的第一个、第二个、第三个......元素
常规操作可以直接使用索引(下标)获取: const arr [5,8,6,9,10] const first arr[0] //5 const second arr[1] //8 const third arr[2] //6 不使用索引,如何获取: const [first] [5,8,6,9,10] //…...
前端面试题(持续更新~~)
文章目录 一、基础1、数组常用的方法2、数组有哪几种循环方式?分别有什么作用?3、字符串常用的方法4、原型链5、闭包6、常见的继承7、cookie 、localstorage 、 sessionstrorage区别8、数组去重方法9、http 的请求方式10、数据类型的判断方法11、cookie …...
ubuntu下无法访问和ping通github的一种解决方法
近期在ubuntu下突然无法访问github了,ping也无法ping通,尝试过更换不同的网络也无济于事。后来在https://blog.csdn.net/weixin_48544978/article/details/133899687 这个文章中找到了解决办法。 运气比较好,只按照文章中的第一步将http://…...
C#,入门教程(28)——文件夹(目录)、文件读(Read)与写(Write)的基础知识
上一篇: C#,入门教程(27)——应用程序(Application)的基础知识https://blog.csdn.net/beijinghorn/article/details/125094837 C#知识比你的预期简单的多,但也远远超乎你的想象! 与文件相关的知识…...
开源大数据集群部署(六)Keytab文件生成
作者:櫰木 Keytab文件用于在不输入密码的情况下对主体(用户或服务)进行身份验证。以下是创建Kerberos身份验证的步骤。 1、创建keytab文件 除了使用明文密码登录之外,Kerberos还可以使用keytab密码文件登陆,现在为te…...
图神经网络X项目|基于图神经网络的电商行为的预测(5%)
文章目录 Jupyter Notebook 学习人工智能的好帮手数据集数据集下载数据集调用数据集应用技巧——获取不重复的编号数据集应用技巧——随机采样数据集应用技巧——抽取前N项进行模拟测试 数据集构建技巧一——查看数据集构建进度 Jupyter Notebook 学习人工智能的好帮手 【Jupy…...
仰暮计划|“说是操场,那就是个土坡,我们在那儿上边种种树啊,拔拔草,有的时候还会有同学来喂喂羊啥的,这都是我们的娱乐”
我是1948年农历二月份在河南省许昌市五女店镇的一个乡村里边出生的。从我记事的时候,中华人民共和国就已经成立了。当时是好多年,经历了三大改造呀、生产队呀、大队呀,乱七八糟的很多,估计你们现在这些孩子们啊,都没有…...
Java【代码 16】将word、excel文件转换为pdf格式和将pdf文档转换为image格式工具类分享
1.感谢 感谢小伙伴儿的分享: ● 不羁 ● 郭中天 整合调整后的工具类Gitee地址:https://gitee.com/yuanzhengme/java_application_aspose_demo 2.包含的工具类 ● WordToPdfUtil用于将word文档转换为pdf格式的工具类 ● ExcelToPdfUtil用于将excel文档…...
8亿日活的抖音,用“自我设限”谋求长期主义
文|新熔财经 作者|寒蝉鸣 随着手机近乎全民化的普及,在互联网上“冲浪”的人是越来越多了。 根据QuestMobile发布的《中国互联网核心趋势年度报告(2023)》,2023年,中国移动互联网月活跃用户规…...
Final Cut Pro v10.7.1中文版 专业级视频剪辑软件 兼容M
Final Cut Pro 是 macOS平台上最好的视频剪辑软件,基于Cocoa编写,支持多路多核心处理器,支持GPU加速,支持后台渲染,可编辑从标清到4K的各种分辨率视频,ColorSync管理的色彩流水线则可保证全片色彩的一致性。…...
Chrome扩展之通信
Chrome扩展通信 chrome扩展的5种js js类型介绍popup单击插件图标后的弹窗中的js,由于单击图标打开popup,焦点离开又立即关闭,生命周期一般很短。content-script与页面共享DOM,但是不共享JS,可访问部分chrome扩展API。…...
Appium 环境配置
Appium 是一个开源的、跨平台的测试框架,可以用来测试 Native App、混合应用、移动 Web 应用(H5 应用)等,也是当下互联网企业实现移动自动化测试的重要工具。Appium 坚持的测试理念: •无需用户对 App 进行任何修改或…...
前端JavaScript篇之Javscript数组的常用方法有哪些?JavaScript判断数组的方式有哪些?
目录 Javscript数组的常用方法有哪些?JavaScript判断数组的方式有哪些?1. Array.isArray() 方法:2. instanceof 操作符:3. Object.prototype.toString.call() 方法:4. Array.from() 方法: Javscript数组的常…...
【Spring Boot 3】【Redis】基本数据类型操作
【Spring Boot 3】【Redis】基本数据类型操作 背景介绍开发环境开发步骤及源码工程目录结构 背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工…...
[MySQL]关于表的增删改查
目录 1.插入 1.1单行数据全列插入 1.2多行插入,指定列插入 编辑2.查询 2.1全列查询 2.2指定列查询 3.3查询字段为表达式 2.4别名 编辑2.5去重 2.6排序 2.7条件查询 2.7.1基本查询: 2.7.2 AND 和OR 2.7.3范围查询 2.7.4模糊查询 2.7.5分页查询 limit …...
编译和链接(翻译环境:预编译+编译+汇编+链接、运行环境)
一、翻译环境和运行环境 在ANSI C的任何一种实现中,存在两个不同的环境。 第1种是翻译环境,在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境,它用于实际执行代码。 VS中编译器:cl.exe ;Linux中…...
OpenLayers飞机航线动画实战:如何让SVG图标随航线动态转向(附完整代码)
OpenLayers飞机航线动画实战:SVG图标动态转向与轨迹平滑渲染技术解析 在航空监控、物流追踪等地理信息系统中,飞机或运输工具的实时轨迹展示一直是核心需求。传统静态路径显示已无法满足现代交互需求,如何实现图标随航线动态转向的平滑动画成…...
zteOnu:核心功能全解析与实战指南
zteOnu:核心功能全解析与实战指南 【免费下载链接】zteOnu 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 解锁高级配置:工厂模式激活指南 场景描述 网络管理员在配置中兴光猫时,发现普通用户权限无法修改关键网络参数&…...
Unity资源引用:FileID+GUID的秘密
两个不起眼的数字,撑起了整个项目的引用大厦 一、开篇:一次差点毁掉项目的"手滑" 周三下午三点。 你的美术同事小王在整理项目文件夹。他觉得Assets目录太乱了——贴图、模型、材质散落在各处,像一个没人收拾的房间。 于是他开始整理: 把 Assets/player_text…...
香农信息熵的5个常见误区:你以为的熵可能不是真正的熵
香农信息熵的5个常见误区:你以为的熵可能不是真正的熵 在机器学习与数据科学领域,香农信息熵(Shannon Entropy)常被视为衡量数据不确定性的黄金标准。但有趣的是,许多从业者在使用这一概念时,往往陷入一些…...
通义千问3-Reranker-0.6B实战应用:智能客服问答排序系统搭建
通义千问3-Reranker-0.6B实战应用:智能客服问答排序系统搭建 1. 智能客服问答排序系统概述 在智能客服系统中,如何从海量知识库中快速找到最匹配用户问题的答案,是提升用户体验的关键。传统基于关键词匹配的方法往往难以理解用户真实意图&a…...
ROS机器人开发实战:利用tf2库高效处理四元数、欧拉角与旋转矩阵的转换
1. 为什么机器人开发需要处理多种姿态表示 在机器人开发中,我们经常需要处理各种姿态数据。无论是移动机器人的定位信息、机械臂末端执行器的位姿,还是传感器数据的融合,都离不开对物体在三维空间中位置和朝向的描述。但有趣的是,…...
Qwen3-ASR-1.7B效果实测:识别普通话、英语、方言,准确率惊人
Qwen3-ASR-1.7B效果实测:识别普通话、英语、方言,准确率惊人 1. 多语言语音识别新标杆 当我第一次听到Qwen3-ASR-1.7B能够识别30种语言和22种中文方言时,说实话我是持怀疑态度的。毕竟在语音识别领域,支持的语言越多,…...
上海优质seo公司推荐_上海seo公司的优势在哪里
<h3 id"seo_seo">上海优质seo公司推荐_上海seo公司的优势在哪里</h3> <p>在当今互联网营销的时代,SEO(搜索引擎优化)已经成为企业提升网站流量、品牌知名度的重要手段。特别是在经济发达的大都市上海,…...
Go语言实战:用EMQX搭建MQTT物联网系统(含Docker部署指南)
Go语言与EMQX实战:构建高可靠物联网通信系统 1. 物联网通信基础与MQTT协议解析 在万物互联的时代,设备间的实时通信成为物联网系统的核心需求。MQTT协议凭借其轻量级、低功耗和高效发布/订阅机制,已成为物联网领域的事实标准。让我们深入探讨…...
从零到部署:手把手教你用Django+OpenCV搭建一个能识别交通标志的“智能眼”(附完整源码)
实战指南:用DjangoOpenCV构建高精度交通标志识别系统 1. 环境配置与项目初始化 在开始构建交通标志识别系统前,需要准备完善的开发环境。以下是经过验证的配置方案: 核心工具栈选择: Python 3.9(推荐3.10.6版本&#x…...
