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

<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判断，用正则可能准确一点。后面用弹性布局。效果如下：

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue