2019.2.11 每日随笔

（1）v-for的元素在点击切换样式的时候，发现会所有循环元素都改变

• 发生这个的原因，主要是 :class 的判断使用问题，我之前用的是

:class = "{'acive': item.xxx === curXXX}"

• 这样当点击此元素的时候，所有的兄弟循环元素都加上了这个样式，那么如何解决这个问题，要用v-for 中的index解决

<div v-for="(item, index) in xxx" :key="index">

• 那么我们的绑定class 就要改成

: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元素循环的时候，要达到好的效果，需要对原来的数组进行重新整理，否则会很难实现想要的结果