问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ liveInfo.liveName }}等

解决办法:

1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题(推荐)

具体实现:

<div class="active_txt" v-cloak v-if="liveInfo.liveTextImgs!=''">
      {{liveInfo.liveTextImgs}}
</div>

CSS中添加:

[v-cloak]{ display: none; }

2、可以在需要编译的元素前后加上<template></template>

关于<template>详解

http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

3、通过切换需要编译元素的display属性,最开始设为none,请求完数据后设为block

4、VUE前置加载

5、使用组件,模板都写在组件中,html 文件中仅插入组件标签

6、用个“loading”的遮罩层,请求数据成功后再显示

但是有的时候会不起作用,可能的原因有二:

一,v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级

[v-cloak] {
    display: none !important;
}

这里使用了简单粗暴的方法加了个!important,有更好的方法欢迎留言。

二,样式放在了@import引入的css文件中(传统的开发方式)
v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中

Logo

前往低代码交流专区

更多推荐