vue的注意規(guī)范之v-if 與 v-for 一起使用教程
更新時間：2019年08月04日 08:57:28 作者：瘋?cè)?
這篇文章主要介紹了vue的注意規(guī)范之v-if 與 v-for 一起使用方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
當(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>
或者：放在計(jì)算屬性遍歷
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)你想為僅有的一些項(xià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)文章
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue-element-admin 全局loading加載等待
本文主要介紹了vue-element-admin 全局loading加載等待，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本篇文章主要介紹了詳解vue事件對象、冒泡、阻止默認(rèn)行為，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12
通常我們的項(xiàng)目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue組件之間的通信，幫助大家更好的理解和學(xué)習(xí)前端的相關(guān)知識，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10