工作笔记【四】

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

代码:

复制代码
<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>

看得懂,会写了,下班!

相关推荐
使一颗心免于哀伤11 小时前
《设计模式之禅》笔记摘录 - 21.状态模式
笔记·设计模式
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Grassto3 天前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
周周记笔记3 天前
学习笔记:第一个Python程序
笔记·学习
丑小鸭是白天鹅3 天前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin