（1）v-for的元素在点击切换样式的时候，发现会所有循环元素都改变
- 发生这个的原因，主要是 :class 的判断使用问题，我之前用的是
:class = "{'acive': item.xxx === curXXX}"
- 这样当点击此元素的时候，所有的兄弟循环元素都加上了这个样式，那么如何解决这个问题，要用v-for 中的index解决
<div v-for="(item, index) in xxx" :key="index">
:class="{'active': index === curIndex}"
（2）如何在选项中每个元素title中添加序号（比如p元素）
- 我们写了一个方法专门在页面渲染完成后给每个元素title添加序号，但是有个问题是这个方法放在哪里，放在created里，还是mounted里，其实最好放在异步请求结束之后，因为有一些元素是否显示是通过接口返回的结果决定，通过v-show来显示，那么，如果异步请求还没结束，我们这个方法就在created或者mounted中执行了，那么赋予的需要就不准确了
sortIncre() {
if (this.xxx) {
this.$nextTick(() => {
let incrementList = this.$refs.incrementService.children
let newIncrementList = []
// 先对数组中有display === 'none'的进行去除
for (let i = 0; i < incrementList.length; i++) {
if (incrementList[i].style.display === '') {
newIncrementList.push(incrementList[i])
}
}
for (let i = 0; i < newIncrementList.length; i++) {
newIncrementList[i].getElementsByTagName('p')[0].innerHTML = `${i + 1}、${newIncrementList[i].getElementsByTagName('p')[0].innerHTML}`
}
})
}
}
(3) 通过$refs 添加/删除 样式类
- 使用classList.remove 或者 classList.add
this.$refs.A.classList.remove('theme-checked')
this.$refs.B.classList.remove('theme-checked')
this.$refs.C.classList.add('theme-checked')
(4) swiper 的摧毁和创建
- 由于用户点击不同的按钮，会显示不同组合的幻灯片，那么必须要使用swiper的摧毁，否则在前一个swiper没有被摧毁的时候，新建一个swiper，新建的往往有各种各样的问题，所以要这么做：
// 在data中添加一个变量
mySwiper: '' // swiper组件
// 在创建新的swiper的时候，要先判断是否存在原有swiper
if (this.mySwiper) {
this.mySwiper.destroy()
}
this.initSwiper()
（5）善于使用二维数组等方式进行元素循环
- 有时候v-for元素循环的时候，要达到好的效果，需要对原来的数组进行重新整理，否则会很难实现想要的结果
