当前位置: 首页 > 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查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。 为什么要进行读写分离 因…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...