欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法

 更新時間:2018年10月12日 11:48:57   作者:King哥2  
vue中v-if 和v-else-if在頁面加載的時候,不滿足條件的標(biāo)簽會加載然后再消失掉,如果要解決這個問題,下面小編給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧

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

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學(xué)習(xí)中v-if和v-show一起使用的問題

v-if和v-show一起使用

在開發(fā)項目過程中v-ifv-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'>暫無數(shù)據(jù)</td>
   </tr>
</tbody>

原因其實(shí)很簡單,根據(jù)vue的文檔描述:

當(dāng)它們都處于同一節(jié)點(diǎn)時,v-for 的優(yōu)先級高于 v-if。這意味著,v-if 將分別在循環(huán)中的每次迭代上運(yùn)行。

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

當(dāng)然這樣用也有它的好處,當(dāng)你只想將某些項渲染為節(jié)點(diǎn)時,這會非常有用,如下:(以上只渲染 todos 中未完成的項。)

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

如果你的意圖與此相反,是根據(jù)條件跳過執(zhí)行循環(huán),可以將 v-if 放置于包裹元素上(或放置于

總結(jié)

以上所述是小編給大家介紹的Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論