淺談v-for 和 v-if 并用時(shí)篩選條件方法
更新時(shí)間：2019年11月07日 10:04:23 作者：靈靈7
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<ul id="ul">
<li v-for="todo in todos" v-if="todo<4">
{{ todo }}
</li>
</ul>
<script>
varvm=new Vue({
el:"#ul",
data:{
todos: [ 1, 2, 3, 4, 5 ]
}
})
</script>
說明：在處于同一節(jié)點(diǎn)的時(shí)候，v-for 優(yōu)先級(jí)比 v-if 高。先運(yùn)行v-for 的循環(huán)，然后在每一個(gè)v-for 的循環(huán)中，再進(jìn)行 v-if 的條件對(duì)比。
v-if="todo<4" 會(huì)篩選 符合 <4 的 todo 項(xiàng)
而如果你的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將 v-if 置于外層元素 (或 <template>)上。如：
<ul id="ul" v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
<p v-else>
no todo left!
</p>
</ul>
<script>
varvm=new Vue({
el:"#ul",
data:{
todos: [ 1, 2, 3, 4, 5 ]
}
})
</script>
以上這篇淺談v-for 和 v-if 并用時(shí)篩選條件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router 控制路由權(quán)限的實(shí)現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue中props值的傳遞，在vue中父組件要正向的向子組件傳遞數(shù)據(jù)或者參數(shù)，子組件接收到后根據(jù)參數(shù)的不同來進(jìn)行對(duì)應(yīng)的渲染，這個(gè)正向的數(shù)據(jù)傳遞在vue組件中就是通過props來實(shí)現(xiàn)的，需要的朋友可以參考下2009-05-05
本文主要介紹了Element-plus側(cè)邊欄踩坑的問題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時(shí)不會(huì)出現(xiàn)文字顯示和小箭頭無法隱藏的問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11
vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例
今天小編就為大家分享一篇vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
解決vue select當(dāng)前value沒有更新到vue對(duì)象屬性的問題
今天小編就為大家分享一篇解決vue select當(dāng)前value沒有更新到vue對(duì)象屬性的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了vue3中Teleport和Suspense的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家介紹了vue面試observable原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問題及解決辦法
這篇文章主要介紹了關(guān)于ElementUI el-table 鼠標(biāo)滾動(dòng)失靈的問題及解決辦法,本文給大家分享問題所在原因及解決方案,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)
這篇文章主要為大家介紹了創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09