Vue 解决因网络延时 页面中的{{XXX}}模板直接展示在用户面前,配合v-cloak指令

v-cloak指令:

1、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉 v-cloak属性

2、使用 CSS配合v-cloak可以解决网速慢时,页面展示出{{XXX}}模板的问题

案例:

1、可能会出问题的写法:

html:

<h2 > {{name}} </h2>

调用网络上的Vue.js,网速慢时,会出现如下效果:

2、正确写法:

html:

<h2 v-clock> {{name}} </h2>

css:

[v-cloak]{

display:none

}

加入v-cloak 配合 css 后,网速慢会先不显示,等加载了vue后,直接显示渲染后的内容

学习链接:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=42&vd_source=60a28e8364654bee938864b1d19905ec

42

posted @ 2023-02-15 21:19  codeing123  阅读(91)  评论(0编辑  收藏  举报