vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標簽會加載然后再消失掉，如果要解決這個問題，案例如下：

vue html代碼塊：

<div id="divApp">  <div v-if="type === 'A'" v-cloak>    A  </div>  <div v-else-if="type === 'B'" v-cloak>    B  </div>  <div v-else-if="type === 'C'" v-cloak>    C  </div>  <div v-else v-cloak>    Not A/B/C  </div></div>

vue js代碼塊：

var divApp = new Vue({  el: '#divApp',  data: {    isActive: true,    hasError: false,   type: 'A'  },  // 在 `methods` 對象中定義方法  methods: {  }})

css 代碼：

[v-cloak] { display:none;}

下面看下vue學習中v-if和v-show一起使用的問題

v-if和v-show一起使用

在開發項目過程中v-if和v-show一起使用時，接下面跟著的v-else會在頁面上面顯示兩次 。代碼如下：

<tbody class="sortable" id="sortTable">   <tr v-show="items.length" v-for="(item,index) in items" :item="item">       <td :id="item.objectId">{{index+1}}</td>       <td>{{item.number}}</td>   </tr>   <tr v-else>       <td colspan='2'>暫無數據</td>   </tr></tbody>

原因其實很簡單，根據vue的文檔描述：

當它們都處于同一節點時，v-for 的優先級高于 v-if。這意味著，v-if 將分別在循環中的每次迭代上運行。

 也就是v-if會判斷兩次。

當然這樣用也有它的好處，當你只想將某些項渲染為節點時，這會非常有用，如下：(以上只渲染 todos 中未完成的項。)

<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>

如果你的意圖與此相反，是根據條件跳過執行循環，可以將 v-if 放置于包裹元素上（或放置于

總結

以上所述是小編給大家介紹的Vue中 v-if 和v-else-if頁面加載出現閃現的問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！