[デモ] vue内の画像のグループを循環し、データがある場合はレンダリングし、データがない場合はレンダリングしない

序文

items走査したい配列です

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

テキスト

画像のグループを循環して、データがないときにレンダリングするのではなく、データがあるときにレンダリングする必要がある

次のコードを分析してみましょう。

<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>

上記のコードには、次のコード行があります。

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

なぜこのように書かれているのですか？

通常、ビューレイヤーを変更するだけでよく、

v-ifでは、長さが0の場合はfalseを意味し、次のコードはレンダリングされません

長さがある場合、trueとして表され、次のコードがレンダリングされます

優れたユーザーエクスペリエンスのために、ロジックをより厳密にし、インターフェイスの安定性を高めるために、構文拡張を使用できます

たとえば、最初に私はこれを直接書きました

v-if="data.extraPhoto.length"

次に、data.extraPhotoがオブジェクトでない場合、data.extraPhoto.lengthがエラーを報告するとします

次に書くことができます

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

より厳格に、私たちはまだできます

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