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>