【Demo】在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"

为什么要这样写？

在vue中，我们一般只需要修改视图层，

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"