使用v-show時,當isshow:false時,在頁面刷新的過程中,isshow依然會短暫顯示一下


<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 標簽直到實例准備完畢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM