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就能解决的事想了半天

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

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

相关文章

Mybatis与Spring集成

目录 一.Spring整合Mybatis 1.什么是Spring整合Mybatis 新建一个ssm ​编辑 导入pom依赖 导入generatorConfig.xml 导入Spring-context.xml文件 导入Spring-mybatis.xml文件 自动生成Bookmapper.xml和Bookmapper文件 编写接口类&#xff1a;Bookbiz 编写接口实现类 …

SAP_ABAP_OO_ALV案例

SAP ABAP顾问能力模型梳理_企业数字化建设者的博客-CSDN博客SAP Abap顾问能力模型https://blog.csdn.net/java_zhong1990/article/details/132469977 一、OO_ ALV ,面向对象开发ALV报表 基于对收款清账平台的开发&#xff0c;解释 OO_ALV开发的程序结构与代码模板参考 1.1 代…

openGauss和oracle的上下翻命令和自动补全

openGauss的gsql需要加参数“-r”才能支持上下翻命令和自动补全。 gsql -d postgres -p 15400 -r oracle的sqlplus也不支持上下翻命令和自动补全。 使用rlwrap可以实现上下翻命令&#xff0c;但是还是不能实现自动补全功能。 1、安装rlwrap&#xff0c;使oracle支持上下翻滚 …

Ubuntu 22.04 通过 Docker 启动 Graylog

安装 Docker 和 Docker-Compose 这里以 Ubuntu 22.04 举例&#xff0c;如果你和我的系统一样&#xff0c;那么可以照抄下面这个命令来快速安装 docker。如果不是&#xff0c;你也可以 点击这里 来跳转到 Docker 官网来实现安装。 #!/bin/bash apt-get update apt-get -y inst…

搭建vue项目环境之二(完成基础环境的搭建之后开始正式安装)

由于工作太忙了&#xff0c;一直都是东奔西跑的&#xff0c;好多知识都是零散的&#xff0c;最近刚好有空&#xff0c;就计划利用这个空闲时间认真的整理以前学过的知识&#xff0c;帮助自己回顾过往&#xff0c;中间也难免有很多错误&#xff0c;欢迎指正挑刺。一直以来都是万…

【单片机】有人WH-LTE-7S1 4G cat1 模块连接服务器,教程,记录

文章目录 4G cat1 模块封装引脚名称功能拓扑图串口模块调试WH-LTE-7S1 4G cat1 模块 我买的这个模块内置了电信卡&#xff0c;不用插电话卡就能用&#xff0c;要插也行&#xff0c;在背面。 ⚫ 5-16V 宽电压供电 ⚫ LTE Cat 1&#xff0c;搭载 4G 网络&#xff0c;低时延&…

继承AndroidView Model的错误

ViewModelProvider(this)[RegisterViewModel::class.java] 一行简单的代码&#xff0c;总是报这个错误 Caused by: java.lang.NoSuchMethodException: com.xinfa.registerlogin.viewmodel.LoginViewModel. [class android.app.Application] 经过一下午的思索&#xff0c;终于找…

RocketMQ mqadmin java springboot python 调用笔记

命令 mqadmin命令列表 yeqiangyeqiang-MS-7B23:/opt/rocketmq-all-5.1.3-bin-release$ sh bin/mqadmin The most commonly used mqadmin commands are:updateTopic Update or create topicdeleteTopic Delete topic from broker and NameServer.…

Java集合sort排序报错UnsupportedOperationException处理

文章目录 报错场景排查解决UnmodifiableList类介绍 报错场景 我们使用的是PostgreSQL数据库&#xff0c;存储业务数据&#xff0c;业务代码使用的是Spring JPA我们做的是智慧交通信控平台&#xff0c;有个功能是查询展示区域的交通态势&#xff0c;需要按照不同维度排序展示区…

执行jmeter端口不够用报错(Address not available)

执行jmeter端口不够用报错(Address not available) linux解决方案 // 增加本地端口范围 echo 1024 65000 > /proc/sys/net/ipv4/ip_local_port_range// 启用快速回收TIME_WAIT套接字 sudo sysctl -w net.ipv4.tcp_tw_recycle1// 启用套接字的重用 sudo sysctl -w net.ipv4.t…

javeee spring cglib动态代理

cglib动态代理 依赖 <dependency><groupId>cglib</groupId><artifactId>cglib-nodep</artifactId><version>3.2.4</version></dependency>代理类 package com.test.cglibProxy;import net.sf.cglib.proxy.Enhancer; import …

【简单bat】写一个定时关机的批处理程序

感谢我那可爱的GPT助手对代码的优化工作。 echo off REM Author: liyang TEL 155-4089-9552echo 欢迎使用自动关机计划设置脚本&#xff01;by LiYang echo.:choose_action set /p "action_choice请选择要执行的操作&#xff08;输入1设置定时关机任务&#xff0c;输入2删…

循环结构(个人学习笔记黑马学习)

while循环语句 在屏幕中打印0~9这十个数字 #include <iostream> using namespace std;int main() {int i 0;while (i < 10) {cout << i << endl;i;}system("pause");return 0; } 练习案例: 猜数字 案例描述:系统随机生成一个1到100之间的数字&…

远程教育:别催了,在线巡课真爽啊

随着远程教育和在线学习的兴起&#xff0c;教学活动的场景正逐渐从传统的实体教室转向虚拟的线上平台&#xff0c;这也催生了对教学质量监管的新需求。 在线巡课系统在这一背景下应运而生&#xff0c;它不仅能够实时观察教师的教学过程&#xff0c;还能够量化评估教学效果&…

ADS 错误 1808可能原因 ADSError 1808

​ 调试问题记录&#xff1a; 背景&#xff1a; Ads调试时遇到错误&#xff0c;返回码是 1808&#xff0c;查询倍福官网 得出1808错误原因是 symbol not found 原因&#xff1a; ADSError: symbol not found (1808). Possible incorrect runtime port selected 可能是ads的地…

极氪汽车的云资源治理细探

作者&#xff1a;极氪汽车吴超 前言 2021 年&#xff0c;极氪 001 迅速崭露头角&#xff0c;仅用 110 天便创下了首款车型交付量“最快破万”的纪录。2022 年 11 月&#xff0c;极氪 009 在短短 76 天内便率先完成了首批交付&#xff0c;刷新了中国豪华纯电品牌交付速度的纪录…

MYSQL中的COLLATE(COLLATION)是什么?

#字符集 character_set_server utf8mb4 collation_server utf8mb4_general_ci 其实是用来排序的规则。对于mysql中那些字符类型的列&#xff0c;如VARCHAR&#xff0c;CHAR&#xff0c;TEXT类型的列&#xff0c;都需要有一个COLLATE类型来告知mysql如何对该列进行排序和比较…

内网实战1

1、信息收集&#xff1a; 使用nmap做端口扫描&#xff1a; nmap -sV -Pn -T4 192.168.26.174重要端口&#xff1a;80、445、139、135、3306 目录扫描&#xff1a; 访问80端口&#xff1a;发现一个网站是phpstudy搭建的&#xff1b; 发现一个mysql数据库&#xff0c;那我们…

lintcode 1063 · 我的日历III 【hard 线段树】

题目链接&#xff0c;描述 https://www.lintcode.com/problem/1063 实现一个MyCalendarThree 来储存你的时间。一个新的事件 总是 可以被加入。你的类会有一种方法&#xff1a;book(int start, int end)。 正式的说&#xff0c;这代表在一个半开区间 [start, end) 上进行预订…

11-Manager 和 模型Model

准备工作: 一. Manager 库: Manager: 用于管理相关操作端命令和使用相关操作端命令 (1). 安装flask-script: pip install flask-script2.0.3 (2). 在app.py中 包装 app from apps import create_app# Manager类用于管理相关操作端命令和使用相关操作端命令 from flask_scrip…