相思资源网 Design By www.200059.com

今天在使用vue进行数据渲染的时候发现当我不停的按F5刷新的时候出现了{{message}}的情况。经过多方查找我知道了要解决这个问题需要添加v-cloak指令,这时有一个问题困扰了我很久,我明明按照大家所说的加了v-for为什么还是没有用。后来折腾了很久才发现原因,先不说为什么,看看代码来:

在html中:

<ul v-for="item in person">
  <li v-cloak>{{item.name}}</li>
</ul>

在CSS中:

[v-cloak]:{diapsly:none;}

在script中:

var vm = new Vue({
  el:'#myapp',
  date:{
    person:[
      {name:'zhangsan'},
      {name:'lisi'},
      {name:'wangwu'}
    ]
  }
})

最开始是没有css样式,当我发现我不断的刷新的时候页面上会出现{{item.name}}一闪而逝,这时我在li上面添加了v-cloak指令,并添加了css样式。此时,我发现还是会有闪烁,我发现他根本没有执行css的样式。
现在大家应该都猜到原因了吧,因为我是在for循环里面添加的v-cloak。之前查的资料是直接使用。

css:

[v-cloak]:{display:none}

html:

<div v-cloak>{{message}}</div>

看到别人的写法以后我就以为是直接在要渲染的该标签添加指令,这也导致了我的v-cloak一直没有起到作用。最后,我把v-cloak添加到了v-for上,一切终于变得正常了。

<ul v-for="item in person" v-cloak>
  <li >{{item.name}}</li>
</ul>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue数据渲染闪烁,vue,数据渲染,vue渲染数据

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“详解vue数据渲染出现闪烁问题”

暂无详解vue数据渲染出现闪烁问题的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。