vue3 响应式基础(怎么改变界面值)

在开发中,我们需要在改变一个数据的同时,去改变页面的变化,那这个时候响应式声明用起来就比较方便

之前做安卓开发的时候,要改变页面,首先拿到页面的一个控件,再对控件进行赋值或者其他的操作来改变界面

1、ref()

通过ref()函数来声明响应式状态

做一个简单的一个计数器,我们需要一个计数按钮,一个计数值,通过按钮按一下就加一次

<div>
    <div>{{ counter }}</div>
    <button @click="addCounter">点我加1</button>
  </div>
  
  
<script lang="ts" setup>
import {ref} from "vue";


// 声明一个默认值为0的counter
const counter = ref(0)
// 给counter+1
const addCounter = () => {
  counter.value++
}
</script>

ref()可以声明各种类型的数据包含对象,

// 声明一个对象类型
const obj = ref({
  title: '标题'
})


// 修改标题
 obj.value.title = '我是修改后的标题'

我们对声明的变量或

者常量设置数据时候,都需要一个.value

2、reactive()

使用reactive也是可以的,它直接是声明一个对象式的变量,如果要去修改值,可以直接拿变量去修改

const current = reactive({
  title:'初始值'
})
// 直接去修改值
current.title = '修改后的值'

两种方式采用哪种,我觉得都可以,只要能达到最后程序运行的结果,采取哪种方式都可以。

本来是想写一篇关于网络请求封装的文章的,在网上找了个接口,结果卡在了跨域的问题,几天都没有找到解决办法。网络请求一直用的公司同事封装的组件,自己也得去真正的学习下请求的核心技术吧。

在工作中,如果遇到比较棘手的问题,自己先想想怎么处理,要是自己能解决,那就会加深对知识的理解,以后用起来就会更得心应手。如果自己实在不能处理就请教下同事,也许你的知识盲区就是别人擅长的东西呢。

605511a937ae7f2cb03869e4e664378f.png

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

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

相关文章

Flink 调度源码分析4:Physical Slot 分配过程

Flink 调度源码分析1&#xff1a;拓扑图创建与提交过程 Flink 调度源码分析2&#xff1a;调度过程 Flink 调度源码分析3&#xff1a;Shared Slot 分配策略 Flink 调度源码分析4&#xff1a;Physical Slot 分配过程 1 整体过程 在 SlotSharingExecutionSlotAllocator.allocate…

清空了电脑回收站,之前的文件还能否恢复?

电脑已成为我们日常生活中不可或缺的一部分。我们在电脑上处理文档、保存图片、下载视频等&#xff0c;而电脑中的回收站则成为我们处理不再需要文件的一个便捷工具&#xff0c;当我们想要删除某些文档的话&#xff0c;它并不是立即从硬盘上消失&#xff0c;而是被系统移动到了…

智能网关和交换机在智慧路灯杆上的用途差别

智慧路灯杆是智能城市建设中的一个重要组成部分&#xff0c;它整合了智能照明、视频监控、交通管理、环境监测、网络覆盖、信息发布、一键告警等多种功能。针对智慧路灯杆的使用场景&#xff0c;智能网关和交换机各自发挥着不同的作用&#xff0c;并且拥有各自的优缺点&#xf…

详解HTML

目录 1.HTML 结构 1.1认识HTML标签 1.2标签层次结构 1.3快速生成代码框架 2.HTML常见标签 2.1注释标签 2.2标题标签&#xff1a;h1-h6 2.3段落标签&#xff1a;p 2.4换行标签&#xff1a;br 2.5格式化标签 2.6图片标签&#xff1a;img 2.7超链接标签 2.8表格标签…

英语学习笔记22——Give me/him/her/us/them a .... Which one?

Give me/him/her/us/them a … Which one? 给我/他/她/我们/他们一个…… 哪一个&#xff1f; 词汇 Vocabulary empty a. 空的&#xff0c;啥也没有的    v. 倒空 例句&#xff1a;这个盒子是空的。    This box is empty.    这是个空盒子。    This is an emp…

VAE-变分自编码器(Variational Autoencoder,VAE)

变分自编码器&#xff08;Variational Autoencoder&#xff0c;VAE&#xff09;是一种生成模型&#xff0c;结合了概率图模型与神经网络技术&#xff0c;广泛应用于数据生成、表示学习和数据压缩等领域。以下是对VAE的详细解释和理解&#xff1a; 基本概念 1. 自编码器&#…

璞公英教学平台同时进驻两大云教育平台,让智慧教育“触手可及”!

近日&#xff0c;璞公英教学平台云上服务版图进一步扩大&#xff0c;在中国电信天翼云甄选商城、宁夏教育资源公共服务平台成功上线&#xff0c;为更多学校更多师生提供精细化服务。借助云平台的强大力量&#xff0c;璞公英教学平台将为用户带来前所未有、超越想象的教学体验。…

Java面试八股之进程和线程的区别

Java进程和线程的区别 定义与作用&#xff1a; 进程&#xff1a;在操作系统中&#xff0c;进程是程序执行的一个实例&#xff0c;是资源分配的最小单位。每个进程都拥有独立的内存空间&#xff0c;包括代码段、数据段、堆空间和栈空间&#xff0c;以及操作系统分配的其他资源…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十一)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 18 节&#xff09; P18《17.ArkUI-状态管理Observed 和 ObjectLink》 第一件事&#xff1a;嵌套对象的类型上加上 Observed 装饰器…

推荐一个娱乐网站poki

今天&#xff0c;我要向您介绍一个充满乐趣的娱乐网站——Poki。这是一个集合了众多在线小游戏的平台&#xff0c;适合所有年龄段的玩家。无论您是想在工作间隙放松一下&#xff0c;还是寻找适合家庭聚会时的娱乐活动&#xff0c;Poki都能满足您的需求。所有游戏都无需下载或安…

leetcode_2024年5月19日10:51:26

238.除自身以外各元素的乘积 给你一个整数数组nums&#xff0c;返回数组answer&#xff0c;其中answer[i]等于nums中除nums[i]之外其余各元素的乘积。 题目数据保证数组nums之中任意元素的全部前缀元素和后缀的乘积都在32位整数范围内。 请不要使用除法&#xff0c;且在o&am…

使用神经实现路径表示的文本到向量生成

摘要 矢量图形在数字艺术中得到广泛应用&#xff0c;并受到设计师的青睐&#xff0c;因为它们具有可缩放性和分层特性。然而&#xff0c;创建和编辑矢量图形需要创造力和设计专业知识&#xff0c;使其成为一项耗时的任务。最近在文本到矢量&#xff08;T2V&#xff09;生成方面…

大语言模型的工程技巧(二)——混合精度训练

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型&#xff1a;从线性回归到通用人工智能》&#xff0c;欢迎有兴趣的读者多多支持。 混合精度训练的示例请参考如下链接&#xff1a;regression2chatgpt/ch11_llm/gpt2_lora_optimum.ipynb 本文将讨论如何利用混合…

vue.js状态管理和服务端渲染

状态管理 vuejs状态管理的几种方式 组件内管理状态&#xff1a;通过data&#xff0c;computed等属性管理组件内部状态 父子组件通信&#xff1a;通过props和自定义事件实现父子组件状态的通信和传递 事件总线eventBus&#xff1a;通过new Vue()实例&#xff0c;实现跨组件通…

个人博客网站开发笔记2

文章目录 前言p2 hexo安装与使用安装 Nodejs安装 GitGit Bash的使用&#xff0c;代码克隆Clone p3 写作一级标题二级标题三级标题四级标题五级标题六级标题 前言 现在继续看教程 p2 hexo安装与使用 link 啊有点难受&#xff0c;开幕就是需要自己先安装Nodejs和Git&#xff…

git使用介绍

一、为什么做版本控制&#xff08;git是版本控制工具&#xff09; 为了保留之前所以的版本&#xff0c;以便回滚和修改 二、点击安装 三、基础操作 1、初步认识 想要让git对一个目录进行版本控制需要以下步骤&#xff1a; 进入要管理的文件夹进行初始化命令 git init管理…

el-table 组件实现 “合并单元格 + N行数据小计” 功能

目录 需求 - 要实现的效果初始代码代码升级&#xff08;可供多个表格使用&#xff09;CommonTable.vue 子组件 使用子组件1 - 父组件 - 图1~图3使用效果展示 使用子组件2 - 父组件 - 图4使用效果展示 注意【代码优化 - 解决bug】 需求 - 要实现的效果 父组件中 info 数据示例 …

Redis篇 浅谈分布式系统

分布式系统 一. 单机架构二.分布式系统引入三.引入更多的应用服务器四.读写分离五.引入缓存服务器六. 将数据库服务器拆分七.微服务架构 一. 单机架构 单机架构,就是用一台服务器,完成所有的工作. 这时候就需要我们引入分布式系统了. 分布式系统是什么含义呢?就是由一台主机服…

MySQL实战——主从异步复制搭建(一主一从)

一、搭建前的准备 主库 192.168.1.76 从库 192.168.1.77 二、搭建 1、编辑配置文件 vi /etc/my.cnf 主库 [mysqld] log-binmysql-bin server-id1 从库 [mysqld] server-id2 2、在主库创建复制用户 create user repl192.168.1.77 identified by repl123; grant replic…

9、QT—SQLite使用小记

前言 开发平台&#xff1a;Win10 64位 开发环境&#xff1a;Qt Creator 13.0.0 构建环境&#xff1a;Qt 5.15.2 MSVC2019 64位 sqlite版本&#xff1a;sqlite3 文章目录 一、Sqlite是什么二、sqlite使用步骤2.1 下载2.2 安装2.3 使用 三、Qt集成sqlite33.1 关键问题3.2 封装sql…