<scroll-view class="right-scroll-view" scroll-y> <view v-for="(item, index) in categorys" :key="index"> <view class="right-scroll-view-item" v-for="(child, childIndex) in item.childer" :key="childIndex" @click="selectCategory1(child)" :class="{ active1: selectedIndex2 == index }" v-show="selectedIndex2 === index" > {{ child.name}} </view> </view> </scroll-view>如何只让我选中的那个child.name挂上active1这个类
时间: 2024-02-14 20:08:45 浏览: 33
你可以通过绑定 class 的方式来实现这个效果。
首先,在 `data` 中添加一个变量 `selectedChildName`,用来存储当前选中的 `child.name`。然后,在 `selectCategory1` 方法中,将选中的 `child.name` 赋值给 `selectedChildName`,并更新 `selectedIndex2`。最后,在循环渲染 `child` 的 `view` 标签上,通过判断当前 `child.name` 是否等于 `selectedChildName`,来决定是否添加 `active1` 类。
代码示例:
```
<scroll-view class="right-scroll-view" scroll-y>
<view v-for="(item, index) in categorys" :key="index">
<view class="right-scroll-view-item"
v-for="(child, childIndex) in item.childer"
:key="childIndex"
@click="selectCategory1(child)"
:class="{ active1: child.name === selectedChildName }"
v-show="selectedIndex2 === index"
>
{{ child.name}}
</view>
</view>
</scroll-view>
<script>
export default {
data() {
return {
selectedChildName: '', // 存储当前选中的 child.name
selectedIndex2: 0,
categorys: [
{
childer: [
{ name: '选项1' },
{ name: '选项2' },
{ name: '选项3' }
]
},
{
childer: [
{ name: '选项4' },
{ name: '选项5' },
{ name: '选项6' }
]
}
]
}
},
methods: {
selectCategory1(child) {
this.selectedChildName = child.name; // 记录当前选中的 child.name
this.selectedIndex2 = index;
}
}
}
</script>
```
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)