点击高亮显示vue

在 Vue 3 中，点击一个区块并使其高亮显示的实现非常简单，可以通过动态绑定 CSS 类来完成。当用户点击某个区块时，使用 Vue 的 v-bind:class 或 :class 动态地改变该区块的样式，从而达到高亮效果。

方案 1：使用 v-bind:class 动态绑定类

假设你有多个区块，点击某个区块时给它添加一个高亮的样式。

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