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

refreactive vue3

ref

可以定义:基本类型、对象类型的响应式数据

reactive

只能定义:对象类型的响应式数据

<template><div class="person"><h2>Name: {{ name }}</h2><h2>Age: {{ age }}</h2><h2>Tel: {{ tel }}</h2><button @click="changeName">changeName</button><button @click="changeAge">age++</button><button @click="showTel">tel</button><h2>Car's price: {{ car.price }}</h2><button @click="changePrice">price++</button><h2>Country list: </h2><ul><li v-for="c in countries" :key="c.name">{{ c.name }}</li></ul><button @click="change1Country">change one country</button></div>
</template><script lang="ts" setup name = "Person">import { ref, reactive } from 'vue'//datalet name = ref('Jack')let age = ref(19)let tel = '123456'let car = reactive ({brand:'Volve', price:100})let countries = reactive([{name:'CN', continent:'Asia'},{name:'JP', continent:'Asia'},{name:'US', continent:'North America'}])//functionfunction changeName() {name.value = 'Tom'}function changeAge() {age.value += 1}function showTel() {alert(tel)}function changePrice() {car.price += 1}function change1Country() {countries[2].name = 'Canada'}</script><style scoped>/* 可以添加样式 */
</style>

相关文章:

refreactive vue3

ref 可以定义:基本类型、对象类型的响应式数据 reactive 只能定义:对象类型的响应式数据 <template><div class"person"><h2>Name: {{ name }}</h2><h2>Age: {{ age }}</h2><h2>Tel: {{ tel }}</h2><button cl…...

【项目实践Day06】异步请求与同步请求+Ajax+微信小程序上实现发送异步请求

什么是同步和异步 同步 在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。也就是一旦调用开始&#xff0c;就必须等待其返回结果&#xff0c;程序的执行顺序和任务排列顺序一致。客户端必须等待服务器端的响应。在等待的期间客…...

Elasticsearch面试系列-01

1. 什么是 Elasticsearch? ES是一种开源、RESTful、可扩展的基于文档的搜索引擎,它构建在Lucene库上。 用户使用Kibana就可以可视化使用数据,同时Kibana也提供交互式的数据状态呈现和数据分析。 Apache Lucene搜索引擎基于JSON文档来进行搜索管理和快速搜索。 Elasticse…...

QT tableWidget横向纵向设置

横向控件 要设置QTabWidget选项卡的字体方向&#xff0c;可以使用QTabWidget的setTabPosition()方法。通过传递Qt枚举值QTabWidget.east或QTabWidget.west作为参数&#xff0c;可以设置选项卡的字体方向为从左到右或从右到左。 myTabWidget QTabWidget() myTabWidget.setTabP…...

Unity Mesh简化为Cube mesh

Mesh简化为Cube mesh &#x1f373;食用&#x1f959;子物体独立生成CubeMesh&#x1f96a;合并成一个CubeMesh&#x1f32d;Demo &#x1f373;食用 下载并导入插件&#x1f448;即可在代码中调用。 &#x1f959;子物体独立生成CubeMesh gameObject.ToCubeMesh_Invidual()…...

openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

文章目录 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint249.1 功能描述249.2 语法格式249.3 参数说明249.4 示例 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint 249.1 功能描述 指明join的顺序&#xff0…...

大规模预训练语言模型的可解释性研究与实践

1. 背景介绍 随着深度学习技术的发展&#xff0c;大规模预训练语言模型&#xff08;Large-scale Pre-trained Language Models, LPLMs&#xff09;在自然语言处理领域取得了显著的成果。这些模型通常通过在大规模文本语料库上进行无监督预训练&#xff0c;然后微调到特定任务上…...

Rust常用库之序列化和反序列化库serde(使用 Serde 处理json)

文章目录 Rust常用库之序列化和反序列化库serde&#xff08;使用 Serde 处理json&#xff09;什么是serde库设计使用 Serde 处理jsonr# 的使用 参考 Rust常用库之序列化和反序列化库serde&#xff08;使用 Serde 处理json&#xff09; 什么是serde库 官网&#xff1a;https:/…...

java设计模式(2)---六大原则

设计模式之六大原则 这篇博客非常有意义&#xff0c;希望自己能够理解的基础上&#xff0c;在实际开发中融入这些思想&#xff0c;运用里面的精髓。 先列出六大原则&#xff1a;单一职责原则、里氏替换原则、接口隔离原则、依赖倒置原则、迪米特原则、开闭原则。 一、单一职…...

数学建模(层次分析法 python代码 案例)

目录 介绍: 模板: 例题:从景色、花费、饮食,男女比例四个方面去选取目的地 准则重要性矩阵: 每个准则的方案矩阵:​ 一致性检验: 特征值法求权值: 完整代码: 运行结果: 介绍:...

Gitlab介绍

1.什么是Gitlab GitLab是一个流行的版本控制系统平台&#xff0c;主要用于代码托管、测试和部署。 GitLab是基于Git的一个开源项目&#xff0c;它提供了一个用于仓库管理的Web服务。GitLab使用Ruby on Rails构建&#xff0c;并提供了诸如wiki和issue跟踪等功能。它允许用户通…...

Amuse .NET application for stable diffusion

Amuse github地址&#xff1a;https://github.com/tianleiwu/Amuse .NET application for stable diffusion, Leveraging OnnxStack, Amuse seamlessly integrates many StableDiffusion capabilities all within the .NET eco-system Welcome to Amuse! Amuse is a profes…...

【机器学习-05】模型的评估与选择

在前面【机器学习-01】机器学习基本概念与建模流程的文章中我们已经知道了机器学习的一些基本概念和模型构建的流程&#xff0c;本章我们将介绍模型训练出来后如何对模型进行评估和选择等 1、 误差与过拟合 学习器对样本的实际预测结果与真实值之间的差异&#xff0c;我们称之…...

【11】工程化

一、为什么需要模块化 当前端工程到达一定规模后,就会出现下面的问题: 全局变量污染 依赖混乱 上面的问题,共同导致了代码文件难以细分 模块化就是为了解决上面两个问题出现的 模块化出现后,我们就可以把臃肿的代码细分到各个小文件中,便于后期维护管理 前端模块化标准…...

Python中requests、aiohttp、httpx性能对比

在Python中&#xff0c;有许多用于发送HTTP请求的库&#xff0c;其中最受欢迎的是requests、aiohttp和httpx。这三个库的性能和功能各不相同&#xff0c;因此在选择使用哪个库时&#xff0c;需要考虑到自己的需求和应用场景。 首先&#xff0c;让我们来了解一下这三个库的基本…...

网络原理(5)——IP协议(网络层)

目录 一、IP协议报头介绍 1、4位版本 2、4位首部长度 3、8位服务器类型 4、16位总长度 5、16位标识位 6、3位标志位 7、13位偏移量 8、8位生存空间 9、8位协议 10、16位首部检验和 11、32位源IP地址 12、32位目的IP地址 二、IP协议如何管理地址&#xff1f; 1、动…...

GE IS200AEPAH1BKE IS215WEPAH2BB是两种不同的压力测量模块

GE IS200AEPAH1BKE和IS215WEPAH2BB是两种不同的压力测量模块&#xff0c;它们都属于GE&#xff08;通用电气&#xff09;公司的产品。 具体来说&#xff0c;以下是这两种模块的一些特点和应用&#xff1a; IS200AEPAH1BKE&#xff1a;这款模块适用于需要高性价比的压力测量应用…...

Rust 与 C++ ,孰优孰劣?

Rust 与 C 是两种高级系统级编程语言&#xff0c;它们都在追求性能、控制底层硬件细节的同时强调安全性。以下是两者的详细对比&#xff1a; 目标与理念 Rust&#xff1a;由 Mozilla 主导开发&#xff0c;目标是构建一种既快速又安全的系统级编程语言&#xff0c;特别是解决 C…...

MySQL、Oracle的时间类型字段自动更新:insert插入、update更新时,自动更新时间戳

1.MySQL 支持的字段类型&#xff1a;DATETIME、TIMESTAMP drop table if exists test_time_auto_update; create table test_time_auto_update (id bigint auto_increment primary key comment 自增id,name varchar(8) …...

Testng框架集成新业务

总体框架设计见我另一篇博客&#xff1a;httpclienttestng接口自动化整体框架设计 <block&#xff1a;表示测试用例块> block后面是 测试用例的名称 ||接口名,该接口名在URL.txt里维护接口 ||get\post&#xff1a;表示请求的方法 get_1\2\3\4&#xff1a;代表加密 get: …...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...