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

最新推荐文章于 2024-03-31 23:12:01 发布

CahierX

最新推荐文章于 2024-03-31 23:12:01 发布

阅读量3.8k

点赞数

分类专栏： vue js 文章标签： vue没有实时渲染 data数据改变未渲染

本文链接：https://blog.csdn.net/qq_35493664/article/details/103679210

版权

在Vue应用中，当修改data数据后页面未实时更新，问题可能出在CSS3的渐变色属性上。span元素设置linear-gradient背景可能导致-webkit-text-fill-color: transparent;结合，使得样式更新未显示。去除渐变色属性或修改text-fill-color为非透明颜色，数据变化将正常显示。

摘要由CSDN通过智能技术生成

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;
}