淺談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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue點擊自增和求和的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了解決vue前后端端口不一致的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
vue項目中企業(yè)微信使用js-sdk時config和agentConfig配置方式詳解
這篇文章主要介紹了vue項目中企業(yè)微信使用js-sdk時config和agentConfig配置,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了Vue之定義全局工具類問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue的開發(fā)中,我們經(jīng)常會用到外部組件庫,下面這篇文章主要給大家介紹了關(guān)于vue中深度選擇器的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應用程序,在Vue.js中,我們可以通過動態(tài)地增加和刪除組件來實現(xiàn)動態(tài)頁面的構(gòu)建和更新,本文介紹Vue?刪除和增加自定義組件實戰(zhàn)教程,感興趣的朋友一起看看吧2024-08-08
Vue生產(chǎn)環(huán)境如何自動屏蔽console
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動屏蔽console問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue+element-ui實現(xiàn)主題切換功能，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue.js 初體驗之Chrome 插件開發(fā)實錄 ,需要的朋友可以參考下2017-05-05
vue2和el-input無法修改和寫入并且不報錯的解決方案
這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報錯的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07