vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
推薦閱讀：
vue中v-for和v-if一起使用之使用compute的示例代碼
詳解vue中v-for和v-if一起使用的替代方法template
vue項(xiàng)目中同一個(gè)標(biāo)簽中不能同時(shí)使用v-if和v-for
問(wèn)題描述
其實(shí)這個(gè)問(wèn)題并不會(huì)影響vue項(xiàng)目的運(yùn)行，但是會(huì)在編譯軟件上顯示一個(gè)報(bào)紅問(wèn)題，在別的地方也報(bào)紅的時(shí)候很容易被誤導(dǎo)，并且也不美觀，因此呢，需要找到一個(gè)合理的方案。
這里呢，我試著使用過(guò)內(nèi)外層嵌套的問(wèn)題，但是，這種方式不符合我的業(yè)務(wù)需求，并且也達(dá)不到即判斷又渲染的問(wèn)題，因此讓我苦惱的很長(zhǎng)的時(shí)間，我甚至去查看了vue的源碼，并且發(fā)現(xiàn)了一些問(wèn)題，其實(shí)說(shuō)到底還是自己的腦子沒(méi)有轉(zhuǎn)過(guò)來(lái)
問(wèn)題原因
就像我們可以見到 for 循環(huán)中嵌套 if 但是，if 中 怎么能嵌套 for呢？這是一個(gè)優(yōu)先級(jí)的問(wèn)題，因?yàn)?for 的優(yōu)先級(jí)比 if 的高，所以在vue中 v-for 的優(yōu)先級(jí)比 v-if 更高
解決方案
這里描述了兩種解決方案：
第一種方案：
首先第一種是我最終項(xiàng)目的結(jié)局的方式，因?yàn)樵趘ue中還有一個(gè) v-show 剛好
可以滿足我的項(xiàng)目的需求，而且也不會(huì)報(bào)錯(cuò)，因此一般，在這種情況下，我
們可以嘗試使用 v-show 來(lái)試試，是否滿足自己的項(xiàng)目需求。
第二種方案：
我們都知道vue中有一種特殊的空標(biāo)簽 template 標(biāo)簽，可以使用 template 標(biāo)
簽作為 循環(huán)標(biāo)簽，在標(biāo)簽中進(jìn)行在填寫主要標(biāo)簽進(jìn)行循環(huán)。
代碼如下：
<template v-for="(item, index) in list" >
<div v-if="show" :key="index">
{{item .name}}
</div >
</template>但是這種方式不符合我的項(xiàng)目需求，因此我使用的是第一種方法。
到此這篇關(guān)于vue中v-for和v-if不能在同一個(gè)標(biāo)簽的解決方案的文章就介紹到這了,更多相關(guān)vue中v-for和v-if不能在同一個(gè)標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vant2移動(dòng)端Vue組件庫(kù)問(wèn)題記錄
Vant是一套輕量、可靠的移動(dòng)端組件庫(kù),通過(guò)Vant可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動(dòng)端Vue組件庫(kù)問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在Vue中實(shí)現(xiàn)不刷新的iframe頁(yè)面的方案
在Vue項(xiàng)目中,我們可能會(huì)遇到這樣的需求：需要在應(yīng)用中嵌入iframe頁(yè)面,并且要求在路由切換的過(guò)程中,iframe的內(nèi)容不會(huì)被刷新,本文將介紹如何解決這個(gè)問(wèn)題,并給出具體的實(shí)現(xiàn)方案,需要的朋友可以參考下2025-01-01
ue3.2新增了一個(gè)指令v-memo,引入這個(gè)指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue--vuex的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個(gè)基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
深入了解Vue3中偵聽器watcher的實(shí)現(xiàn)原理
在平時(shí)的開發(fā)工作中，我們經(jīng)常使用偵聽器幫助我們?nèi)ビ^察某個(gè)數(shù)據(jù)的變化然后去執(zhí)行一段邏輯。在?Vue.js?2.x?中，你可以通過(guò)?watch?選項(xiàng)去初始化一個(gè)偵聽器，稱作?watcher。本文將詳細(xì)為大家介紹一下偵聽器的實(shí)現(xiàn)原理，需要的可以參考一下2022-04-04
這篇文章主要介紹了mpvue 單文件頁(yè)面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過(guò)配置 mpvue-config-loader 來(lái)實(shí)現(xiàn)在 vue 文件內(nèi)書寫小程序的頁(yè)面配置，感興趣的小伙伴們可以參考一下2018-12-12
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來(lái)看看吧2021-08-08