网页元素和网页HTML不一致,Chrome开发者工具看页面元素与渲染的元素不一致

问题描述

我有一个需求，一篇文字，过几秒更改里面的内容，带有动画过渡。

我有四段文字，放在一个数组里。结构如下：

texts = [

{text:'aaa'},

{text:'bbb'},

{text:'ccc'},

{text:'ddd'},

]

我首先用了jQuery的dom.html(text)&dom.text(text)来修改元素内容，代码如下：

//触发修改

var timer;

if ($.fn.fullpage.getCurIndex() === 2) {

timeText(-1);

} else {

clearTimeout(timer);

}

//修改函数

function timeText (num) {

var i = num++ >= 3 ? 0 : num++;

timer = setTimeout(function () {

var text = texts[i].text;

$('#page3-content').html(text);

timeText(i);

},3000);

}

然后就出现了渲染问题，我把动画去掉了，修改文字内容，最后使用了Vue的v-html&v-text，甚至用了计算属性，打断点，Vue的值是对的，Chrome里面看元素也变了，但是页面渲染出来的元素不对，前一个不消失。

最后我又换了显示隐藏的写法，v-show&v-if,代码如下，效果如图：

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上面的一样。求前辈解答