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

vue3之reactive和ref学习篇

<script lang="ts" setup>
// reactive参数必须为引用类型 和ref简单类型或者引用类型
import { reactive, ref } from 'vue';
const arr = reactive([10])
const count = ref(0);
let increasing = true;
console.log(count)
const change = ()=>{if(increasing){count.value++;if(count.value===10){increasing = false}}else{count.value--;if(count.value ===0){increasing = true;}}}
</script>
<template>
<span>{{ arr[0] }}</span>
<span>{{ arr[1] }}</span>
<button @click="change">{{ count }}</button>
</template>

change函数实现了一个简单的0-10的一个自增自减的循环,之所以记录是自己写的时候费了点时间,一直在想这个判断条件怎么优化,其实条件无法继续优化了,除非一个一个数字判断或者循环,加一个标志increasing就能解决的事想了半天

相关文章:

vue3之reactive和ref学习篇

<script lang"ts" setup> // reactive参数必须为引用类型 和ref简单类型或者引用类型 import { reactive, ref } from vue; const arr reactive([10]) const count ref(0); let increasing true; console.log(count) const change ()>{if(increasing){c…...

【推荐】Spring与Mybatis集成整合

目录 1.概述 2.集成 2.1代码演示&#xff1a; 3.整合 3.1概述 3.2 进行整合分页 接着上两篇&#xff0c;我已经写了Mybatis动态之灵活使用&#xff0c;mybatis的分页和特殊字符的使用方式接下来把它们集成起来&#xff0c;是如何的呢&#x1f447;&#x1f447;&#x1…...

listdir, makedirs, shuffle, exists, webdriver.Chrome, roll方法快速查阅

1 os.listdir() os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表。 2 os.makedirs(path) 方法用于递归创建目录。 如果子目录创建失败或者已经存在&#xff0c;会抛出一个 OSError 的异常 3 numpy.random.shuffle(x) 由numpy.random调用&#xff0c;可…...

java.nio.ByteBuffer 学习笔记

目录 java 重复使用bytebuffer例子&#xff1a; java验证flip函数&#xff1a; flip讲解 以下内容转自&#xff1a; java.nio.ByteBuffer java 重复使用bytebuffer例子&#xff1a; import java.nio.ByteBuffer;public class ByteBufferExample {public static void main…...

自动化实时在线静电监控系统的构成

自动化实时在线静电监控系统是一种帮助企业监测和管理静电问题的技术解决方案。静电在许多工业和商业环境中都是一个潜在的风险和生产问题。通过使用这样的监控系统&#xff0c;企业可以及时发现并采取对策来预防或减轻可能的静电问题。 该系统通常由以下组成部分构成&#xf…...

Windows 转 mac 记录

初次从Windows转mac可能会不适应&#xff0c;建议先看看 【6分钟搞定MacBook】不懂时无所适从&#xff0c;学会后越用越爽&#xff01;_哔哩哔哩_bilibili 我主要是做一些补充记录 1、Windows的右键等于mac的双击触控板、control单击触控板 2、运行中的应用下方会有一个点&…...

Linux_4_文本处理工具和正则表达式

目录 1文本编辑工具之神VIM1.1 vi和vim简介1.2使用vim1.2.1 vim 命令格式1.2.2三种主要模式和转换 1.3扩展命令模式1.3.1扩展命令模式基本命令1.3.2 地址定界1.3.3查找并替换1.3.4定制vim的工作特性1.3.4.1行号1.3.4.2忽略字符的大小写1.3.4.3白动缩进1.3.4.4复制粘贴保留格式1…...

[Unity]VSCode无代码提示

查看vscode的output窗口&#xff0c;提示加载 csproj 文件失败 It need be converted to new SDK style to work in C# Dev Kit. 把unity的PackageManager里的 Visual Studio Editor 版本升级到2.0.20或以上&#xff0c;重新生成csproj文件就好了。 参考vscode官方&#xff…...

画流程图都可以用哪些工具?

在日常生活中&#xff0c;我相信我们很多人都看到过流程图。对于设计师来说&#xff0c;它还需要涉及流程图来反映用户的旅程和交互方式。那么你知道哪些流行的流程图设计软件呢&#xff1f;作为高级设计师&#xff0c;我今天推荐10款流程图设计软件。你可以和我一起读这篇文章…...

Elasticsearch中倒排索引、分词器、DSL语法使用介绍

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…...

rabbitmq笔记-rabbitmq进阶-数据可靠性,rabbitmq高级特性

消息何去何从 mandatory和immediate是channel.basicPublish方法的两个参数&#xff0c;都有消息传递过程中不可达目的地时将消息返回给生产者的功能。 mandatory参数 true&#xff1a;交换器无法根据自身的类型 和路由键找到符合条件的队列&#xff0c;rabbitmq调用Basic.Re…...

【笔记】判断两个String字符串是否相同(考虑字符串为null的情况)

判断两个字符串是否相同&#xff0c;可用于判断一个字段在逻辑处理前后&#xff0c;值是否有变化。 其中重点是要考虑两个字符串是否有为null的情况&#xff0c;如果其中一个&#xff0c;或者两个都为空&#xff0c;用str1.equals(str2)直接判断&#xff0c;就会报NullPointer…...

【校招VIP】java语言考点之多线程NIO

考点介绍 多线程&NIO考点是校招面试中的常制点之一。 Java NIO是new IO的简称&#xff0c;是一种可以替代Java 10的一套新的IO机制。它提供了一套不同于Java标准1O的操作机制&#xff0c;严格来说&#xff0c;NIO与并发并无直接关系&#xff0c;但是使用NIO技术可以大大提高…...

JVM知识点(一)

1、JVM基础概念 &#xff08;1&#xff09;JVM、JRE、JDK JRE&#xff1a;JVM基本类库组成的运行环境就是JRE。JVM自己是无法完成一次编译&#xff0c;处处运行的&#xff0c;需要有一个基本类库告诉JVM如何操作运行&#xff0c;如如何操作文件&#xff0c;连接网络等&#x…...

网页接口导入postman进行接口请求

postman版本&#xff1a;v10.17.4 一、拷贝接口信息 网页打开开发者工具-networkk&#xff0c;在网页上请求一次接口&#xff0c;鼠标指在接口上&#xff0c;点击鼠标右键-copy-copy as cURL(bash) 二、导入postman 打开postman&#xff0c;点击import-Raw text&#xff0c;…...

【Leetcode】124.二叉树中的最大路径和(Hard)

一、题目 1、题目描述 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点 root ,返回其…...

django自动创建model数据

目前使用的环境&#xff1a;django4.2.3&#xff0c;python3.10 django通过一些第三方库&#xff0c;可以轻易的自动生成一系列的后台数据。 首先先创建一个数据库&#xff1a; 然后&#xff0c;在setting.py中就可以指定我们新创建的数据库了。 DATABASES {default: {ENGI…...

vscode 远程连接

这里记录的是修改ssh配置文件的方式远程连接服务器中的docker服务器 假如已经创建好了docker&#xff0c;并已经启动 1. config ssh in dev container 在/etc/ssh/sshd_config中修改 PermitRootLogin in 把 PermitRootLogin prohibit-password 修改为 PermitRootLogin yes …...

Error running ‘Tomcat 8.5.29‘ Address localhost:1099 is already in use

一、Error running ‘Tomcat 8.5.29’ Address localhost:1099 is already in use 原因&#xff1a;端口1099被占用了。 二、解决 2.1 解决方法一-结束该端口1099占用 //1-查看端口占用&#xff0c;根据端口号1099&#xff0c;获取PID(进程ID) netstat -ano | findstr "…...

后端面试话术集锦第 七 篇:nginx面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第 1 篇:spring面试话术💖 💖后端面试话术集锦第 2 篇:spring boot面试话术💖 💖后端面试话术集锦第 3 篇:spring cloud面试话术💖 💖后端面试话术集锦第 4 篇:ElasticSearch面试话术💖 💖后端面试话术集锦第 5 …...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...