工作笔记【四】

对于这种,样式一样,但是图片和字体颜色不一样,动态渲染。

代码:

复制代码
<template>
	<view class="page">
		<view class="rows" v-for="item in data">
			<view class="v0">
				<view class="icon">
					<image :src="item.image" class="xyj-icon"></image>
				</view>
				<view class="title">
					<view class="item">{{item.item}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="status" :style="{ color: item.color }">{{item.status}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const data = [
		{ id:1 , image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已报修',color: '#FD9352'},
		{ id:2, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED' },
		{ id:3 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'处理中', color: '#738AED'},
		{ id:4, image:"../../static/icon/xyj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 '},
		{ id:5 , image:"../../static/icon/cfj-icon.png", item:'TS57421J7Y8Z', time:'2044 - 08 - 30 20:11',status:'已解决', color: '#00C0D3 ' }
	];
</script>

看得懂,会写了,下班!

相关推荐
阿民不加班24 分钟前
【React】打卡笔记,入门学习02:react-router
笔记·学习·react.js
Starry_hello world2 小时前
进程的替换
linux·笔记·有问必答
✎ ﹏梦醒͜ღ҉繁华落℘3 小时前
freeRTOS学习笔记(十二)--信号量
笔记·学习
脑洞代码4 小时前
ADXL345 SPI加速度传感器Linux驱动开发笔记
linux·驱动开发·笔记
新子y4 小时前
【小白笔记】 while 与 for + break 的比较分析
笔记·python
せいしゅん青春之我4 小时前
【JavaEE初阶】网络经典面试题小小结
java·网络·笔记·网络协议·tcp/ip·java-ee
南♡黎(・ิϖ・ิ)っ4 小时前
JavaEE初阶,文件IO(2)
java·笔记·java-ee
是店小二呀5 小时前
Trilium非线性笔记测评:本地知识库+远程协作,构建你的第二大脑!
笔记
忧郁奔向冷的天5 小时前
视觉SLAM十四讲2nd—学习笔记(二)20250817
笔记·学习
摇滚侠6 小时前
Spring Boot3零基础教程,Actuator 导入,笔记82
java·spring boot·笔记