使用 v-cloak 隐藏 Vuejs 渲染中的元素

Posted 2021-05-01 编程新一

你可能在某个地方看到过 v-cloak 这个指令，但是如果你没遇到对应的应用场景的话，估计你也不会注意到这个小小的指令。

问题：Vuejs 在渲染元素的时候，如果我们仔细的去看，应该能看到一个闪现的过程， 这是因为 Vuejs 读取和渲染你的元素需要一定时间。所以会出现这个问题，这对于一下强迫症来说，简直要命，所以我们要怎么解决这个问题呢？

使用 v-cloak 指令就好，比如：

 
   
   
 

  
    
    
  
    <div id="app">
  
    
    
  
      <div>
  
    
    
  
        Hello {{ name }}
  
    
    
  
      </div>
  
    
    
  
    </div>
  
    
    
  

  
    
    
  
    <script src="vue.min.js"></script>
  
    
    
  
    <script>
  
    
    
  
      new Vue({
  
    
    
  
        el: '#app',
  
    
    
  
        data () {
  
    
    
  
          return {
  
    
    
  
            name: 'CODECASTS'
  
    
    
  
          }
  
    
    
  
        }
  
    
    
  
      })
  
    
    
  
    </script>
 
   
   
 

上面的例子极其简单，我们在刷新页面的时候应该可以看到 {{name}} 的闪现，但是如果我们加上 v-cloak ：

 
   
   
 

  
    
    
  
<div id="app">
  
    
    
  
  <div v-cloak> 注意这里
  
    
    
  
    Hello {{ name }}
  
    
    
  
  </div>
  
    
    
  
</div>
  
    
    
  

  
    
    
  
<style>
  
    
    
  
  [v-cloak] {
  
    
    
  
    display: none;
  
    
    
  
  }
  
    
    
  
</style>
 
   
   
 

我们在对应的元素加上了 v-cloak 指令，并且也要添加对应的 style 样式声明。这样我们就看避免闪现的问题了。 更多的文档可以查看：https://vuejs.org/v2/api/#v-cloak

其实这个指令你是可以用到任何一个 Vuejs 的组件当中的，比如这样 <componentv-cloak></component>