在做这种切换的样式时，通常会选择在元素节点加上一个类名，然后选中这个节点的时候，就将类名绑定上去，这种针对一个DOM元素有效，如果同一个DOM结构，进行循环遍历后再通过这种方式去绑定，就会导致出错。
1、DOM元素遍历的代码部分
<view class="setting-item" v-for="(item,index) in detail.checkAttr" :key="index">
<view class="setting-item-header">
{{item.attrname}}
</view>
<view class="setting-item-cate">
<view class="setting-item-cate-phone" :class="{active:isActive[index]==itemIndex}" v-for="(el,itemIndex) in item.value"
@click="handleChange(index,itemIndex)" :key="itemIndex">
{{el}}
</view>
</view>
</view>
数据格式.png
两层遍历，一层遍历是分成的几种配置，第二层遍历则是内部的一些配置信息。在这种情况下做激活的样式，就只能使用
数组去处理，选中项的下标索引存入到数组中，比如：[0,0]则是两个配置项的下标索引为0的项的值。
2、逻辑代码部分
data() {
return {
isActive: [], //激活状态样式
}
},
组件实例化的第一次的时候，就进行存储，只不过这个时候存入的全部是0，也就是默认选中的都是第一项。
mounted() {
for (var i = 0; i < this.detail.checkAttr.length; i++) {
this.isActive.push(0);
}
},
点击切换的时候进行修改数组
handleChange(index, itemIndex) {
// 数组是引用类型，不可以直接赋值，这样只是修改了它的引用地址。
this.isActive.splice(index, 1, itemIndex);
},
此时需要注意的是，数组是引用类型，不能单纯的使用直接赋值的方式去修改数组，那种方法只是简单的修改了数组的引用地址而已。需要借助splice()方式去修改数组的项，第一个参数为对应的修改的数组的下标索引的位置，第二个参数为删除的元素个数，第三个为添加的新的元素。
