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>

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

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

相关文章

lftp服务与http服务(包含scp服务)详解

目录 前言: 1.lftp服务 1.1lftp服务的介绍以及应用场景 1.2安装lftp服务 1.2进行配置 1.3实际操作 2.http服务 2.1http服务介绍以及应用场景 2.1安装httpd服务 2.2进行配置 2.3实际操作 3.scp服务 3.1scp服务的介绍以及应用场景 致谢: 前言: 在当今互联网…

蓝桥杯模块综合——高质量讲解AT24C02,BS18B20,BS1302,AD/DA(PCF8591),超声波模块

AT24C02——就是一个存储的东西&#xff0c;可以给他写东西&#xff0c;掉电不丢失。 void EEPROM_Write(unsigned char * EEPROM_String,unsigned char addr , unsigned char num) {IIC_Start();IIC_SendByte(0xA0);IIC_WaitAck();IIC_SendByte(addr);IIC_WaitAck();while(nu…

arm 解决Rk1126 画框颜色变色问题(RGB转NV12)

在Rv1126上直接对Nv12图像进行绘制时&#xff0c;颜色是灰色。故将Nv12转BGR后绘制图像&#xff0c;绘制完成后转成Nv12&#xff0c;BGR的图像颜色是正常的&#xff0c;但是NV12的图像颜色未画全&#xff0c;如图&#xff1a; 1.排查发现是RGB转NV12的函数出现问题&#xff0c…

理清大数据技术与架构

大数据并不是一个系统软件&#xff0c;更不是一个单一的软件&#xff0c;它实际上是一种技术体系、一种数据处理方法&#xff0c;甚至可以说是一个服务平台。在这个技术体系中&#xff0c;涵盖了许多不同的部件&#xff0c;比如Hadoop服务平台。这一服务平台可以根据具体情况自…

微软AI系列 C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度

在C#中实现相似度计算涉及到加载图像、使用预训练的模型提取特征以及计算相似度。你可以使用.NET中的深度学习库如TensorFlow.NET来加载预训练模型&#xff0c;提取特征&#xff0c;并进行相似度计算。 以下是一个使用TensorFlow.NET的示例&#xff1a; using System; using …

6-187 编写函数实现直接插入排序

编写函数实现直接插入排序。输入若干正整数,以0结束,采用直接插入排序将这些整数按照从大到小的顺序排序。 函数接口定义: void InsertSort(SqList &L); 其中 L 是待排序的关键字,采用顺序表存储。 裁判测试程序样例: #include <iostream> using namespac…

【源码&教程】基于GAN的动漫头像生成系统

1.研究背景 我们都喜欢动漫角色&#xff0c;并试图创造我们的定制角色。然而&#xff0c;要掌握绘画技巧需要巨大的努力&#xff0c;之后我们首先有能力设计自己的角色。为了弥补这一差距&#xff0c;动画角色的自动生成提供了一个机会&#xff0c;在没有专业技能的情况下引入定…

【测试开发学习流程】MySQL函数运算(中)(下)

前言&#xff1a; 这些天还要搞毕业论文&#xff0c;东西少了点&#xff0c;大家将就看看QWQ 目录 1 MySQL的数据处理函数 1.1 文本处理函数 1.2 日期与时间函数 1.3 数值处理函数 1.4 系统函数 2 聚集运算 2.1 聚集函数 2.2 流程函数 1 MySQL的数据处理函数 MySQL支…

MySQL写shell的问题

写shell用什么函数&#xff1f; select <?php phpinfo()> into outfile D:/shelltest.phpdumpfilefile_put_contentsoutfile不能用了怎么办&#xff1f; select unhex(udf.dll hex code) into dumpfile c:/mysql/mysql server 5.1/lib/plugin/xxoo.dll;可以UDF提权https…

WanAndroid(鸿蒙版)开发的第六篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

HarmonyOS应用开发者高级认证答案

** HarmonyOS应用开发者高级认证 ** 以下是高级认证答案&#xff0c;存在个别选项随机顺序答案&#xff0c;自行辨别 判断题 云函数打包完成后&#xff0c;需要到 AppGallery Connect 创建对应函数的触发器才可以在端侧中调用 错 在 column 和 Row 容器组件中&#xff0c;a…

Nexpose v6.6.242 for Linux Windows - 漏洞扫描

Nexpose v6.6.242 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, Release Mar 13, 2024 请访问原文链接&#xff1a;https://sysin.org/blog/nexpose-6/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.o…

设计模式 抽象工厂

01.人类接口 public interface Human { //首先定义什么是人类//人是愉快的&#xff0c;会笑的&#xff0c;本来是想用smile表示&#xff0c;想了一下laugh更合适&#xff0c;好长时间没有大笑了&#xff1b; public void laugh(); //人类还会哭&#xff0c;代表痛苦 public v…

极客SaaS框架开源包

可以自备 听说后边要出saas去水印小程序 saas短视频去重小程序

Java数据结构-二分查找学习

文章目录 前言一、通常情况下的两种二分查找的形式1.经典款2.左闭右开款 二、做题题解中的二分查找的变形1.有效的完全平方数&#xff08;LeetCode367&#xff09; 前言 因为最近刷到二分查找的题目学习到了不同的写法&#xff0c;因此在这里总结一下&#xff0c;方便之后遗忘…

数据结构和算法模块——队列(多例子+图文)

一文帮你看懂队列 什么是线性表为什么要学习线性表&#xff0c;它有什么用处和好处&#xff1f;基本概念分类存储结构结构特点 队列为什么要学习队列&#xff1f;基本概念数据结构基本操作 待填坑 什么是线性表 为什么要学习线性表&#xff0c;它有什么用处和好处&#xff1f;…

docker入门(三)—— 安装docker

docker 安装 环境要求 本次使用的是云服务器&#xff0c;版本是 centos&#xff0c;要求版本在3.10以上 [rootiZbp15293q8kgzhur7n6kvZ /]# uname -r 3.10.0-1160.108.1.el7.x86_64 [rootiZbp15293q8kgzhur7n6kvZ /]# cat /etc/os-release NAME"CentOS Linux" VE…

操作系统核心知识点大梳理

计算机结构 现代计算机模型是基于-冯诺依曼计算机模型 计算机在运行时&#xff0c;先从内存中取出第一条指令&#xff0c;通过控制器的译码&#xff0c;按指令的要求&#xff0c;从存储器中取出数据进行指定的运算和逻辑操作等加工&#xff0c;然后再按地址把结果送到内存中去…

Linux环境变量【终】

&#x1f30e;环境变量 文章目录&#xff1a; 环境变量 环境变量的组织方式 创建自己的环境变量       main函数参数       C语言提供的变量与接口 环境变量与本地变量 了解本地变量       取消本地变量和环境变量 环境变量的出处 总结 前言&#xff1a; 上…

Visual Studio 2013 - 高亮设置括号匹配 (方括号)

Visual Studio 2013 - 高亮设置括号匹配 [方括号] 1. 高亮设置 括号匹配 (方括号)References 1. 高亮设置 括号匹配 (方括号) 工具 -> 选项… -> 环境 -> 字体和颜色 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/