<div id="app">
<div v-show="isshow" v-cloak></div>
</div>
new Vue({
// vm控制的區塊為id為app的div,此div中的所有vue指令均可以被vm解析
el:'#app',
data:{
// 數據 (MVVM中的Model)
isshow:false,
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
});
在使用上述代碼時,即使我 isshow:false,但是頁面在刷新的過程中,div依然會短暫的出現。
解決:
<style>
[v-cloak] {
display: none; }
</style>
原理:這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時,這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
