vue的注意規(guī)范之v-if 與 v-for 一起使用教程
更新時(shí)間：2019年08月04日 08:57:28 作者：瘋?cè)?
這篇文章主要介紹了vue的注意規(guī)范之v-if 與 v-for 一起使用方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中
所以，不推薦v-if和v-for同時(shí)使用
使用推薦方式：
<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)先級(jí)比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。當(dāng)你想為僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用，如下：
<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 一起使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:
- vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
- 在vue+element-plus中無法同時(shí)使用v-for和v-if的問題及解決方法
- Vue3中v-if和v-for優(yōu)先級(jí)實(shí)例詳解
- Vue中判斷語句與循環(huán)語句基礎(chǔ)用法及v-if和v-for的注意事項(xiàng)詳解
- 詳解vue中v-for和v-if一起使用的替代方法template
- 詳解為什么Vue中的v-if和v-for不建議一起用
- Vue.js常用指令匯總（v-if、v-for等）
- vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不推薦)
相關(guān)文章
vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式
這篇文章主要介紹了vue項(xiàng)目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue-element-admin 全局loading加載等待
本文主要介紹了vue-element-admin 全局loading加載等待，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本篇文章主要介紹了詳解vue事件對(duì)象、冒泡、阻止默認(rèn)行為，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
通常我們的項(xiàng)目會(huì)越做越大,頁面也會(huì)越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue組件之間的通信，幫助大家更好的理解和學(xué)習(xí)前端的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了解決Antd Table組件表頭不對(duì)齊的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10