VUE根据文件后缀显示不同的图标（文件列表展示）

一、最近想做一个文件上传管理系统。展示文件仿照百度云那样有图标，有文件名，做文件列表显示。记录下代码。

<div class="item_list">
			<div v-for="item in list" class="file_item">
				<div style="width: 24px;height: 24px;margin: 0 auto;"><img src="src/components/images/image-icon.png" v-if="item.indexOf('png')>0">
					<img src="src/components/images/text-icon.png" v-if="item.indexOf('exe')>0">
					<img src="src/components/images/video-icon.png" v-if="item.indexOf('/')>0"></div>
				<div style="text-align: center;overflow:hidden;">
					<span>{{item}}</span>
				</div>

			</div>
		</div>



// css
.item_list {
		margin-left: 50px;
		display: flex;
		width: 240px;
		height: 240px;
		/*justify-content: space-between;*/
		flex-wrap: wrap;
	}
	.file_item {
		/*flex: 1;*/
		margin-right: 10px;
		width: 50px;
		height: 50px;
	}
// 数据为
list: ['aaaaaaaaa.png','bb.exe','cc/','dd.png','ee.exe','ff/','ee.exe','ff.png','ee/','ff.png']

二、其实就是用vue的v-if来做效果，里面用indexOf判断，用正则可能准确一点。后面用弹性布局。效果如下：