如何解决vue渲染时闪烁{{}}的问题-创新互联

 方法二：partical

元素是已注册的 partial 的插槽，partial 在插入时被 Vue 编译。 元素本身会被替换。 元素需要指定 name 特性。

这货让人想起javaScript原生的fragement元素，但却不是一个东西。partial有静态和动态之分，而要解决上面的问题就要用到动态partial。

示例：

// 注册 partial
Vue.partial('my-partial', '
This is a partial! {{msg}}
')

要解决多个条件的问题，我们就可以为每种情况预先注册好各自的partial，然后将partial的name属性绑定到判断条件，这样就能实现多个条件判断。

 其他：

1.v-if指令可以应用于template包装元素上，而v-show不支持templete

2.将v-show应用在组件上时，因为指令的优先级 v-else 会出现问题，解决办法就是用另一个 v-show 替换 v-else

官方给出的示例如下：

// 错误

这可能也是一个组件

// 正确做法

这可能也是一个组件

Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题

在写APP社区页面的时候在一些地方用了v-show，在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也会露个脸，一闪而过，元素快小还好，如果是特别大的地方就看起来就很不爽，于是就上网搜了下看有没有解决方法，结果还真有。

 方法一: v-cloak

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

 光看这句话一头雾水，后面紧接着说了用法：

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

 示例代码：

// 
 不会显示，直到编译结束。
[v-cloak] {
display: none;
}

{{ message }}

 方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

 而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

{{msg}}

以上是“如何解决vue渲染时闪烁{{}}的问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。