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