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

vue3+pinia实现动态类名及动态颜色

前提

store下models下有个before.ts文件

import { defineStore } from "pinia";
export const usebeforeloggininStore = defineStore("counterStore", {state: () => ({beforelogin_params: [{type: "A登录",color: "#000",flag: 1,},{type: "B登录",color: "#fff",flag: 2,},{type: "C登录",color: "#620",flag: 3,},],}),
});

1. 动态类名

view页面中

<template><div class="beforelogin-container"><div class="container-in"><div v-for="item in beforeData" :key="item.type" class="loginbox">// 动态类名在这里<div class="nei" :class="[`color${item.flag}`]"><h1 @click="login(item.type)">去登录{{ item.type }}</h1></div></div></div></div>
</template><script setup lang="ts">
import { useRouter } from "vue-router";
import { usebeforeloggininStore } from "@/store/before";
const beforelogginginStore = usebeforeloggininStore();
const beforeData = beforelogginginStore.beforelogin_params;
const router = useRouter();const login = (params: any) => {router.push({ path: "/login", params: params });console.log("params", params);
};
</script>

2. 动态颜色

view页面中

<template><div class="beforelogin-container"><div class="container-in"><div v-for="item in beforeData" :key="item.type" class="loginbox">// 动态颜色样式在这里<div class="nei" :style="{ backgroundColor: item.color }"><h1 @click="login(item.type)">去登录{{ item.type }}</h1></div></div></div></div>
</template><script setup lang="ts">
import { useRouter } from "vue-router";
import { usebeforeloggininStore } from "@/store/before";
const beforelogginginStore = usebeforeloggininStore();
const beforeData = beforelogginginStore.beforelogin_params;
const router = useRouter();const login = (params: any) => {router.push({ path: "/login", params: params });console.log("params", params);
};
</script>

相关文章:

vue3+pinia实现动态类名及动态颜色

前提 store下models下有个before.ts文件 import { defineStore } from "pinia"; export const usebeforeloggininStore defineStore("counterStore", {state: () > ({beforelogin_params: [{type: "A登录",color: "#000",flag: 1,…...

CSS实现隐藏滚动条但可以滚动

场景 隐藏滚动条&#xff0c;但可以滚动 解决 全局样式 /* 隐藏滚动条 */ .outer-container::-webkit-scrollbar {width: 0; /* 设置滚动条的宽度为0 */background-color: transparent; /* 设置滚动条背景为透明 */ }/* 自定义滚动条轨道样式 */ .outer-container::-webkit…...

Ceph入门到精通-lunix将文本5行合成1行并按列统计

要将每5行合并为1行&#xff0c;您可以使用shell命令来完成。假设您有一个名为text.txt的文本文件&#xff0c;您可以使用以下命令来实现&#xff1a; bash cat text.txt | paste -d - - - - - 这将把文件中的每5行合并为1行&#xff0c;并且每个字段之间用空格分隔开来。您…...

linux线程讲解

1.线程概述 一个进程在同一时刻只做一件事情&#xff0c;进程是程序执行的一个实例。 线程是操作系统能够进行运算调度的最小单位&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 进程&#xff1a;资源分配的最小单位。线程&#xff0c;程…...

解决本地jar包导入maven

1、确定是否安装maven 2、输入导入命令 命令说明 <path-to-file>为你jar包所在的路径&#xff08;尽量简单并且不要含中文&#xff09; <group-id>为grouId号&#xff0c;与<artifact-id>组成唯一识别你jar包的坐标&#xff0c;当不在公共资源jar包中&#…...

ArcGis地图

1、概述 官网&#xff1a;https://developers.arcgis.com/qt/ 官网&#xff1a;官网指导 官网&#xff1a;Add graphics to a map view Arcgis runtime sdk for Qt 开发记录&#xff08;系列文章&#xff09; 2、创建地图 //online&#xff1a; m_mapView new MapGraphicsV…...

Chrome 和 Edge 上出现“status_breakpoint”错误解决办法

文章目录 STATUS_BREAKPOINTSTATUS_BREAKPOINT报错解决办法Chrome浏览器 Status_breakpoint 错误修复- 将 Chrome 浏览器更新到最新版本- 卸载不再使用的扩展程序和应用程序- 安装计算机上可用的任何更新&#xff0c;尤其是 Windows 10- 重启你的电脑。 Edge浏览器 Status_brea…...

华为AP升级操作记录

AP型号&#xff1a;AP4050DN 原版本&#xff1a;AP4050DN CLOUD V200R008C10SPC700 升级后版本&#xff1a;AP4000 V200R019C00SPC913 开启FTP&#xff0c;用户名&#xff1a;admin, 密码&#xff1a;123456 FTP服务端地址&#xff1a;192.168.8.58 操作&#xff1a;将AP连接…...

面试系列 - String字符串使用详解

String 类是 Java 中最常用的类之一&#xff0c;它用于表示和操作字符串。字符串是一系列字符的序列&#xff0c;可以包含字母、数字、符号等。在 Java 中&#xff0c;String 类是不可变的&#xff0c;这意味着一旦创建了字符串对象&#xff0c;它的内容就不能被修改。 一、常…...

1782_Adobe Reader X实现pdf分页保存

全部学习汇总&#xff1a; GitHub - GreyZhang/windows_skills: some skills when using windows system. 看了一本pdf电子书&#xff0c;觉得其中几页很值得分享。如果分享整本书当然是不错的选择&#xff0c;但是分享整本书很可能会导致一个结局——内容太多别人不会去看&…...

筛选图片,写JSON文件和复制

筛选图片&#xff0c;写JSON文件和复制 筛选图片&#xff0c;写JSON文件筛选图片复制 筛选图片&#xff0c;写JSON文件 # coding: utf-8 from PIL import Image, ImageDraw, ImageFont import os import shutil import cv2 as cv import numpy as np import jsondef zh_ch(str…...

C++并发编程:构建线程安全队列(第二部分:细粒度锁)

C++并发编程:构建线程安全队列(第二部分:细粒度锁) 1. 引言 在多线程环境下,为了保证数据的一致性和正确性,需要使用同步原语来对共享数据的访问进行互斥和同步。std::queue作为一种先进先出(FIFO)的数据结构,它本身并不是线程安全的,同时访问它可能导致数据竞争和不一致的问…...

浅述C++内存管理——new与malloc的不同

前言 C相对于其他语言有一个重要的特点就是对于内存的管理&#xff0c;相比于C语言&#xff0c;C提供了新的关键字new来代替malloc的功能&#xff0c;其中有何不同&#xff0c;请看下文。 一、内存的构成 在我们日常编程过程中最常接触到的就是以下四个分区 以下将分别给出例…...

语言基础篇11——函数、函数参数类型、装饰器、生成器

函数 基本结构 def func_name(value):print(f"Hello {value}")return 0func_name("World")函数参数 参数默认值和五种参数类型 https://docs.python.org/3/glossary.html#term-parameter 参数默认值 带默认值的参数必须在参数列表右边 def func_nam…...

linux jar包class热部署 工具 arthas安装及使用

在不改变类、方法 的前提下&#xff0c;在方法中对业务逻辑做处理 或 打日志等情况下使用。 建议线上日志调试时使用&#xff1a; arthas安装 1. 下载文件 arthas-packaging-3.7.1-bin.zip https://arthas.aliyun.com 2. 服务器安装arthas 2.1 服务器指定目录下创建目录 c…...

Android studio 调整jar包顺序

第一步&#xff1a;编译jar包&#xff0c;放入lib路径下&#xff1a;如&#xff1a; 第二步&#xff1a;app 目录下build.gradle 中添加 compileOnly files(libs/classes.jar) 第三步&#xff1a;project目录下build.gradle 中添加 allprojects {gradle.projectsEvaluated {t…...

用Qt写的机器视觉绘图工具

一个用QtGraphicsView写的机器视觉绘图工具&#xff0c;支持直线查找&#xff0c;圆拟合&#xff0c;卡尺工具&#xff0c;圆环查找等。底部GraphicsScene可以实时显示相机图像&#xff0c;工具获取图像后通过算法处理图像。 Project是基于Qt的例程项目qdraw改的。...

Spring Boot 打包,将依赖全部打进去

一、背景 spring boot 2.4.4 项目&#xff0c;打包&#xff0c;将依赖全部打进去 二、在pom.xml中引入插件 在项目的 pom.xml 文件中&#xff0c;添加 Maven 插件 spring-boot-maven-plugin&#xff0c;示例如下&#xff1a; <build><plugins><!-- ...其他插件…...

SpringCloud入门实战(十五)分布式事务框架Seata简介

&#x1f4dd; 学技术、更要掌握学习的方法&#xff0c;一起学习&#xff0c;让进步发生 &#x1f469;&#x1f3fb; 作者&#xff1a;一只IT攻城狮 &#xff0c;关注我&#xff0c;不迷路 。 &#x1f490;学习建议&#xff1a;1、养成习惯&#xff0c;学习java的任何一个技术…...

MySQL数据库 主从复制与读写分离

读写分离是什么 读写分离&#xff0c;基本的原理是让主数据库处理事务性增、改、删操作&#xff08;INSERT、UPDATE、DELETE&#xff09;&#xff0c;而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。 为什么要进行读写分离 因…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...