dom渲染元素復(fù)用的問題

當(dāng)切換為 tab-2 時候，將其color設(shè)置為red
再切換回 tab-1 時，color的值并未消失
代碼如下：也可以點擊這里查看

<div id="app">
    <ul>
        <li :class="`tab${item}`"
            v-for="item in tabs"
            v-if="tabIndex === item">tab-{{item}}</li>
    </ul>
    <button @click="switchTab">switch</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            tabs: [1, 2],
            tabIndex: 1
        },
        methods: {
            switchTab () {
                this.tabIndex = this.tabIndex === 1 ? 2 : 1
                this.$nextTick(() => {
                    if (this.tabIndex === 2) {
                        document.querySelector('.tab2').style.color = 'red'
                    }
                })
            }
        }
    })
</script>