[Demo] Percorra um grupo de imagens no vue, renderize quando houver dados, não renderize quando não houver dados

Prefácio

itemsÉ a matriz que queremos percorrer

v-for="item in items" :key="item" :src="item"

Text

É necessário percorrer um grupo de imagens, renderizando quando houver dados, não renderizando quando não houver dados

Vamos analisar o seguinte código:

<div class="details-container" v-if="data && data.extraPhoto && data.extraPhoto.length">
	<div class="details-header">
	   <div class="span">产品详情</div>
	 </div>
	 	<!-- 详情页内容 -->
	<div class="details-content">
		<img v-for="item in data.extraPhoto" :key="item" :src="item"></img>
	 </div>
</div>

No código acima, há esta linha de código:

v-if="data && data.extraPhoto && data.extraPhoto.length"

Por que está escrito assim?

Em geral, geralmente precisamos modificar a camada de visualização,

Em v-se, se o comprimento for 0, significa falso, o código a seguir não será renderizado

Se houver um comprimento, expresso como true, o código a seguir será renderizado

Para uma boa experiência do usuário, para tornar a lógica mais rigorosa e melhorar a estabilidade da interface, podemos usar o aprimoramento da sintaxe

Por exemplo, no começo eu escrevi isso diretamente

v-if="data.extraPhoto.length"

Suponha que, se data.extraPhoto não for um objeto, data.extraPhoto.length relatará um erro

Então nós podemos escrever

v-if="data.extraPhoto && data.extraPhoto.length"

Seja mais rigoroso, ainda podemos

v-if="data && data.extraPhoto && data.extraPhoto.length"