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

Question

问题描述

我有一个需求，一篇文字，过几秒更改里面的内容，带有动画过渡。
我有四段文字，放在一个数组里。结构如下：

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,代码如下，效果如图：

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

Answer 1

最后发现不是JS的问题，是CSS出了问题，我的字体颜色使用了渐变背景+文字透明裁切的方式写的，动态渲染的时候出现了这种BUG，如果是去掉这几个渐变色字体的属性，显示就是OK的