問題:使用VUE時,頁面加載瞬間,會閃現模板語法,例如{{ item.name }}等
解決辦法:
1、可以通過VUE內置的指令v-cloak解決這個問題(推薦)
具體實現:
<ul v-cloak v-for="item in items">
<li>{{ item.name }}</li>
</ul>
CSS中添加
[v-cloak]{ display: none; }
在vuejs指令中有?v-cloak
?,這個指令保持在元素上直到關聯實力結束編譯。和CSS規則如?[v-cloak]{display:none}
?一起用時,這個指令可以隱藏未編譯的Mustache標簽直到實例準備完畢。用法如下:
[v-cloak]{display:none;
}
<div v-cloak>{{message}}</div>
這樣?<div>
?不會顯示,直到編譯結束
2、可以在需要編譯的元素前后加上<template></template>
3、通過切換需要編譯元素的display屬性,最開始設為none,請求完數據后設為block
4、VUE前置加載