v-for和v-if配合使用更改样式的其他方法实现

具体代码

import "./lk-box.less";
export default function LkBox() {
	const _InvoiceTypes = [1, 2, ""] as const;
	type InvoiceType = (typeof _InvoiceTypes)[number]; // 1 | 2 | ""
	const list: { isCorrect: InvoiceType }[] = [
		{ isCorrect: 1 },
		{ isCorrect: "" },
		{ isCorrect: 1 },
		{ isCorrect: 2 },
		{ isCorrect: 1 },
		{ isCorrect: 2 },
		{ isCorrect: "" },
		{ isCorrect: 2 },
		{ isCorrect: "" },
		{ isCorrect: "" },
		{ isCorrect: "" },
		{ isCorrect: "" },
	];
	return (
		<div>
			{list.map((i, index) => {
				return (
					<div
						key={index}
						lk-correct={i.isCorrect}
						className="default-box"
					>
						{index}
					</div>
				);
			})}
		</div>
	);
}

.default-box {
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 5px;
	margin: 15px;
	font-size: 28px;
	line-height: 48px;
	text-align: center;
	&[lk-correct="1"] {
		color: #fff;
		background-color: #2adf1396;
		border: none;
	}
	&[lk-correct="2"] {
		color: #fff;
		background-color: #df131396;
		border: none;
	}
	&:hover {
		color: #1d39d8;
		border-color: #1d39d8;
		&[lk-correct="1"] {
			background-color: #2bdf13;
			color: #fff;
		}
		&[lk-correct="2"] {
			background-color: #df1313;
			color: #fff;
		}
	}
}

解释一下：使用lk-correct用css去做颜色判断了，去掉了v-if和class的配合。但是我问了人工智能，这样写虽然性能会好一点，但是好的有限，而且可阅读性并没有v-if好。但是这个方法可以记录一下。