微信营销网站_大数据营销实训心得体会_奶糖 seo 博客_短视频seo优化

在 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 类，在区块被选中时给该区块添加高亮效果（例如改变背景色和边框颜色）。