Vue在页面初次渲染时出现一闪而过的模板变量问题
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ liveInfo.liveName }}等解决办法:1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题(推荐)具体实现:<div class="active_txt" v-cloak v-if="liveInfo.liveTextImgs!=''">{{liveIn...
问题:使用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文件里或者内联样式中
更多推荐
所有评论(0)