Chrome開發(fā)者工具看頁面元素與渲染的元素不一致

問題描述

我有一個需求，一篇文字，過幾秒更改里面的內(nèi)容，帶有動畫過渡。
我有四段文字，放在一個數(shù)組里。結(jié)構(gòu)如下：

texts = [
    {text:'aaa'},
    {text:'bbb'},
    {text:'ccc'},
    {text:'ddd'},
]

我首先用了jQuery的dom.html(text)&dom.text(text)來修改元素內(nèi)容，代碼如下：

//觸發(fā)修改
    var timer;
    if ($.fn.fullpage.getCurIndex() === 2) {
        timeText(-1);
    } else {
        clearTimeout(timer);
    }
//修改函數(shù)
function timeText (num) {
var i = num++ >= 3 ? 0 : num++;
timer = setTimeout(function () {
    var text = texts[i].text;
    $('#page3-content').html(text);
    timeText(i);
},3000);
}

然后就出現(xiàn)了渲染問題，我把動畫去掉了，修改文字內(nèi)容，最后使用了Vue的v-html&v-text，甚至用了計算屬性，打斷點，Vue的值是對的，Chrome里面看元素也變了，但是頁面渲染出來的元素不對，前一個不消失。

最后我又換了顯示隱藏的寫法，v-show&v-if,代碼如下，效果如圖：

<div v-for="(item, index) in texts" :key="index" v-text="item.text" v-show="active === index"></div>

var vm = new Vue({
    el:'#app',
    data:{
        texts:[
        {text:'aaa'},
        {text:'bbb'},
        {text:'vvv'},
        {text:'ddd'},
      ],
      active:0
    },
    /*computed:{
        textOne:function () {
        return this.texts[this.active].text;
            }
    },*/
    methods:{
            timeText:function (num) {
                var i = num++ >= 3 ? 0 : num++;
                vm.active = i;
                timer = setTimeout(function () {
                    vm.timeText(i);
                },3000);
            }
        }
  });

我換了同事的電腦打開，也換了手機微信瀏覽器打開，渲染和Chrome上面的一樣。求前輩解答