当前位置: 首页 > 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: …...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...