在 Vue 3 中，点击一个区块并使其高亮显示的实现非常简单，可以通过动态绑定 CSS 类来完成。当用户点击某个区块时，使用 Vue 的 v-bind:class 或 :class 动态地改变该区块的样式，从而达到高亮效果。
方案 1：使用 v-bind:class 动态绑定类
假设你有多个区块，点击某个区块时给它添加一个高亮的样式。
<template><div class="container"><divv-for="(block, index) in blocks":key="index":class="{'highlight': selectedBlock === index}"class="block"@click="selectBlock(index)">Block {{ index + 1 }}</div></div>
</template><script setup>
import { ref } from 'vue';// 定义区块数据
const blocks = [1, 2, 3, 4, 5];
const selectedBlock = ref(null); // 当前选中的区块索引// 点击区块时更新 selectedBlock
const selectBlock = (index) => {selectedBlock.value = index;
};
</script><style scoped>
.container {display: flex;gap: 10px;flex-wrap: wrap;
}.block {width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;background-color: lightgray;border: 2px solid #ccc;cursor: pointer;
}.highlight {background-color: yellow; /* 高亮时的背景色 */border-color: red; /* 高亮时的边框颜色 */
}
</style>
解释：
v-for: 循环渲染多个区块，每个区块的索引传递给selectBlock方法。:class="{'highlight': selectedBlock === index}": 动态绑定类名。当selectedBlock等于当前区块的索引时，给该区块添加highlight类。@click="selectBlock(index)": 点击区块时，调用selectBlock方法，更新selectedBlock的值。selectedBlock: 这是一个响应式的变量，用于存储当前选中的区块的索引。highlight: 是一个 CSS 类，在区块被选中时给该区块添加高亮效果（例如改变背景色和边框颜色）。
