原文转自: 点我
Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题
在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸,一闪而过,元素快小还好,如果是特别大的地方就看起来就很不爽,于是就上网搜了下看有没有解决方法,结果还真有。
方法一: v-cloak
官方的解释就一句话:这个指令保持在元素上直到关联实例结束编译。
光看这句话一头雾水,后面紧接着说了用法:
和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。
示例代码:(亲测可用)
<template> <keep-alive include="index"> <router-view v-cloak></router-view> </keep-alive> </template> <style> /* 隐藏Vue代码,所有的组件设置成隐藏 */ [v-cloak]:not(body) { display: none; } </style>
方法二: v-text
vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。
而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。
示例代码:
<span v-text="msg"></span> <!-- same as --> <span>{{msg}}</span>
原文地址:https://www.cnblogs.com/myfate/p/12032128.html
时间: 2024-10-11 02:39:26