vue在循环列表数据时如何给第一条数据默认样式 然后点击列表其他数据时给点击的添加默认样式其余移除默认样式
时间: 2023-05-26 12:07:01 浏览: 55
假设列表数据为 `list`,可以通过在循环时添加一个 `isActive` 属性来判断当前数据是否需要加上默认样式。
首先在第一个数据上添加 `isActive: true`,其余数据上则默认为 `isActive: false`。
```
data() {
return {
list: [
{
text: '第一条数据',
isActive: true
},
{
text: '第二条数据',
isActive: false
},
{
text: '第三条数据',
isActive: false
}
]
}
}
```
然后在循环列表时,根据 `isActive` 是否为 true 来添加默认样式。
```
<ul>
<li v-for="(item, index) in list"
:key="index"
:class="{active: item.isActive}"
@click="handleItemClick(index)">
{{ item.text }}
</li>
</ul>
```
最后在 `handleItemClick` 方法中,添加点击事件处理逻辑,将被点击的数据设置为 `isActive: true`,其他数据设置为 `isActive: false`。
```
methods: {
handleItemClick(index) {
this.list.forEach((item, idx) => {
if (idx === index) {
item.isActive = true
} else {
item.isActive = false
}
})
}
}
```
最终的效果是,页面初始化时,第一条数据会有默认样式;点击其他数据时,会将点击的数据加上默认样式,并将其他数据的默认样式移除。
相关推荐
![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)