### Vue.js 中 v-for 的用法及实现点击切换样式的逻辑
#### 使用 `v-for` 指令遍历列表并渲染 DOM 元素
在 Vue.js 中，`v-for` 是一种非常强大的指令，用于基于数组来渲染一个项目列表。其基本语法如下：
```html
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
```
其中 `(item, index)` 表示每次迭代中的当前项及其索引，而 `items` 则是数据源数组。
为了实现点击切换样式的功能，可以通过绑定动态类名的方式完成。以下是具体实现方法[^1]：
---
#### 动态绑定 `class` 并实现点击切换效果
通过结合 `v-for` 和动态绑定 `class` 属性，可以轻松实现点击切换样式的效果。下面是一个完整的示例代码：
```html
<template>
<div id="app">
<!-- 遍历 items 数组 -->
<div
v-for="(item, index) in items"
:key="index"
@click="setActive(index)"
:class="{ active: currentIndex === index }"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{ name: "Item 1" },
{ name: "Item 2" },
{ name: "Item 3" }
],
currentIndex: null // 当前选中项的索引
};
},
methods: {
setActive(index) {
this.currentIndex = index; // 更新当前选中项的索引
}
}
};
</script>
<style scoped>
.active {
background-color: lightblue;
}
</style>
```
上述代码实现了以下功能：
1. **使用 `v-for` 遍历数组**：将 `items` 数组中的每一项渲染为一个 `<div>`。
2. **动态绑定 `class`**：当某个项目的索引等于 `currentIndex` 时，为其添加 `active` 类名[^2]。
3. **处理点击事件**：通过 `@click` 绑定点击事件处理器 `setActive` 方法，在该方法中更新 `currentIndex` 值以反映当前选中的项。
---
#### 结合 `router-link` 实现类似的点击切换效果
如果是在路由场景下使用，则可以利用 `router-link` 的 `active-class` 或者自定义类名的方式来实现类似的功能。例如：
```html
<template>
<div id="app">
<ul>
<li v-for="(route, index) in routes" :key="index">
<router-link
:to="route.path"
:class="{ active: currentRoute === route.path }"
@click.native="setCurrentRoute(route.path)"
>
{{ route.name }}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
routes: [
{ path: "/home", name: "Home" },
{ path: "/about", name: "About" },
{ path: "/contact", name: "Contact" }
],
currentRoute: "/" // 默认激活路径
};
},
methods: {
setCurrentRoute(path) {
this.currentRoute = path; // 设置当前激活路径
}
}
};
</script>
<style scoped>
.active {
font-weight: bold;
color: red;
}
</style>
```
在此示例中，通过监听 `@click.native` 事件手动控制当前激活状态，并动态应用 `active` 类名[^4]。
---
### 总结
以上两种方式分别展示了如何在普通组件和路由场景下实现点击切换样式的逻辑。核心思路在于维护一个变量（如 `currentIndex` 或 `currentRoute`），并通过条件判断动态绑定 `class` 来达到视觉上的变化效果。
---
