遍历元素根据状态显示不同颜色

最新推荐文章于 2024-04-19 15:18:46 发布

马优晨

最新推荐文章于 2024-04-19 15:18:46 发布

阅读量1.9k

点赞数 1

分类专栏： vue 小技巧文章标签：遍历元素根据状态显示不同颜色遍历数组根据状态显示不同颜色遍历元素显示不同颜色遍历数组文字显示不同颜色让列表的文字显示不同颜色

本文链接：https://blog.csdn.net/qq_24147051/article/details/102696738

版权

小技巧同时被 2 个专栏收录

133 篇文章 4 订阅

订阅专栏

vue

90 篇文章 14 订阅

订阅专栏

在这里插入图片描述

如上图所示是一个列表遍历出来的结果，数据状态如下：

			list: [
				{
					id: 1,
					src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
					name: '齐天大肾',
					status: 0,
					weapon: 'AWP',
					dec: '二西莫夫',
					flag: 1,
					time: '19:12:07'
				},
				{
					id: 1,
					src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2942768066,1968228911&fm=26&gp=0.jpg',
					name: '玉皇大帝',
					status: 0,
					weapon: 'AWP',
					dec: '二西莫夫',
					flag: 2,
					time: '19:12:07'
				},
				{
					id: 1,
					src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1158873959,778733211&fm=26&gp=0.jpg',
					name: '齐天大肾',
					status: 0,
					weapon: 'AWP',
					dec: '二西莫夫',
					flag: 3,
					time: '19:12:07'
				},
				{
					id: 1,
					src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2240667863,2590562024&fm=26&gp=0.jpg',
					name: '观音菩萨',
					status: 0,
					weapon: 'AWP',
					dec: '二西莫夫',
					flag: 4,
					time: '19:12:07'
				}
			]