vue的注意規(guī)范之v-if 與 v-for 一起使用教程
當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中
所以，不推薦v-if和v-for同時使用
使用推薦方式：
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
或者：放在計算屬性遍歷
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
當(dāng)它們處于同一節(jié)點(diǎn)，v-for 的優(yōu)先級比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中。當(dāng)你想為僅有的一些項渲染節(jié)點(diǎn)時，這種優(yōu)先級的機(jī)制會十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代碼只傳遞了未完成的 todos。
而如果你的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將 v-if 置于外層元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
總結(jié)
以上所述是小編給大家介紹的vue的注意規(guī)范之v-if 與 v-for 一起使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
vue3+ts+element-plus實(shí)際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程
這篇文章主要介紹了vue3+ts+element-plus實(shí)際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue3如何優(yōu)雅的實(shí)現(xiàn)移動端登錄注冊模塊
這篇文章主要給大家介紹了關(guān)于vue3如何優(yōu)雅的實(shí)現(xiàn)移動端登錄注冊模塊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue如何設(shè)置button的disable屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
一文搞懂vue中provide和inject實(shí)現(xiàn)原理對抗平庸
這篇文章主要為大家介紹了vue中provide和inject實(shí)現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題）
本文主要介紹了Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了使用vue?v-for循環(huán)圖片路徑方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題
這篇文章主要介紹了解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue ElementUi同時校驗(yàn)多個表單(巧用new promise)
這篇文章主要介紹了巧用new promise實(shí)現(xiàn)Vue ElementUi同時校驗(yàn)多個表單功能，實(shí)現(xiàn)的方法有很多種，本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下2018-06-06
今天小編就為大家分享一篇關(guān)于vue中過濾器filter的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01