vue实现如下效果:有多个div,点击哪个div就改变它的css样式,而其他div样式不变
时间: 2024-04-07 21:33:23 浏览: 20
你可以使用Vue的条件渲染和绑定样式的特性来实现这个效果。首先,在Vue组件中定义一个data属性,用来保存被点击的div的索引值。然后,使用v-for指令遍历多个div,并绑定点击事件。在点击事件处理函数中,更新data属性的值为当前点击的div的索引值。最后,使用v-bind指令动态绑定样式,判断当前div的索引值是否与data属性的值相等,如果相等则添加对应的样式。
以下是一个示例代码:
```html
<template>
<div>
<div
v-for="(div, index) in divs"
:key="index"
:class="{ active: activeIndex === index }"
@click="changeActive(index)"
>
{{ div.text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: null, // 初始化时没有选中的div
divs: [
{ text: 'Div 1' },
{ text: 'Div 2' },
{ text: 'Div 3' },
// 更多的div...
]
};
},
methods: {
changeActive(index) {
this.activeIndex = index;
}
}
};
</script>
<style>
.active {
/* 添加选中样式 */
}
</style>
```
在上面的代码中,被点击的div会添加一个名为"active"的样式类,你可以在style标签中定义"active"类的样式,以达到改变样式的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)