在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ dom渲染元素復(fù)用的問(wèn)題

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

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

<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>
回答
編輯回答
野橘

vue在很多情況下 特別是循環(huán) 會(huì)原地復(fù)用dom
你不信可以在控制臺(tái)試驗(yàn)一下

clipboard.png

既然是同一個(gè)dom 你只給他變紅又沒(méi)給他變回來(lái) 自然是紅色的。

解決方案很多,隨便挑一個(gè)

  1. v-for的時(shí)候加個(gè):key 使得不要原地復(fù)用
  2. 不要使用dom操作了。data里放個(gè)變量isRed = false 然后對(duì)應(yīng)一個(gè)css叫red 然后<li :class={red:isRed}>...</li>
  3. v-if改v-show

另外,這數(shù)據(jù)的結(jié)構(gòu)其實(shí)不大合理。。
再另外,this.tabIndex = this.tabIndex === 1 ? 2 : 1這段不大好,也要考慮到以后有n(n>2)個(gè)標(biāo)簽,不要寫(xiě)這么死 寫(xiě)活一點(diǎn)

2017年8月14日 23:19