vue 数据改变页面没有实时渲染(不是一般的情况, 如果一般情况无法解决可能是这个原因)

css3里面的渐变色属性

    background-image: linear-gradient(121deg, rgba(36, 237, 255, 1) 0%, rgba(24, 102, 231, 1) 95.6298828125%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

如果给一个span设置了此属性,则可能导致页面的数据没有实时更新

简单demo,可以亲自去尝试下

<h1>{{count}}</h1>

  data() {
        return {
            count: 10,
            }
        }


h1 {
    background-image: linear-gradient(121deg, rgba(36, 237, 255, 1) 0%, rgba(24, 102, 231, 1) 95.6298828125%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

当我使用vue插件修改count的值页面上的值却没有改变, 为什么会这样我们去掉

background-image: linear-gradient(121deg, rgba(36, 237, 255, 1) 0%, rgba(24, 102, 231, 1) 95.6298828125%);

修改-webkit-text-fill-color: red;

再看下效果就知道为什么了

发现并不是页面数据没修改, 而是渐变色数据配合-webkit-text-fill-color: transparent; 导致修改的样式并没有显示出来依旧是旧的

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_35493664/article/details/103679210
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-06 23:05:12
阅读 ( 787 )
分类：前端

vue 数据改变页面没有实时渲染(不是一般的情况, 如果一般情况无法解决可能是这个原因)

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看