使用computed展示状态不同的样式

最新推荐文章于 2024-06-16 13:16:08 发布

秃头馒头

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量846

点赞数 24

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_54721820/article/details/135602860

版权

本文详细解释了在Vue模板中使用v-if指令的作用，即根据表达式的真假来切换元素的显示状态，通过实例展示了如何在请假记录列表中根据不同状态显示不同的提示信息。

摘要由CSDN通过智能技术生成

v-if指令的作用：根据表达式的真假切换元素的显示状态

<template>
	<view style="padding-bottom: 100px;">
		<f-navbar title="补办记录" navbarType="3"></f-navbar>

		<view style="padding: 24rpx;">
			<template v-for="(item,index) in funtcList">
				<view :key="index" class="card-item"
					:style="{backgroundColor: backgroundCom(item.statuse),borderLeftColor: backgroundComp(item.statuse)}">
					<view class="flex-between">
						<view :style="{color: backgroundComt(item.statuse)}">{{ item.certificate }}</view>
						<view v-if="item.statuse == 1" style="background-color: #5990F5;" class="public">待审批</view>
						<view v-if="item.statuse == 2" style="background-color: #31BA3E; " class="public">已通过</view>
						<view v-if="item.statuse == 3" style="background-color: #F94B30;" class="public">未通过</view>
						<view v-if="item.statuse == 4" style="background-color:#F99830" class="public">已取消</view>
					</view>
					<view style="margin-top: 12rpx;color: #666666; font-size: 28rpx;">{{item.satime}}</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 请假记录
				statuse: 1,
				// 待审核
				funtcList: [{
					statuse: 1,
					certificate: "证件损坏",
					satime: "2010201001"
				}, {
					statuse: 2,
					certificate: "证件丢失",
					satime: "2010201001"
				}, {
					statuse: 3,
					certificate: "证件损坏",
					satime: "2010201001"
				}, {
					statuse: 4,
					certificate: "证件丢失",
					satime: "2010201001"
				}, {
					statuse: 4,
					certificate: "证件丢失",
					satime: "2010201001"
				}, ],
			}
		},
		computed: {
			backgroundCom() {
				return function(status) {
					switch (status) {
						case 1:
							return '#E6EFFE'
							break;
							resizeBy(7)
						case 2:
							return '#E0F5E2'
							break;
						case 3:
							return '#FEE4E0'
							break;
						case 4:
							return '#FEF0E0 '
							break;
					}
				}
			},
			backgroundComp() {
				return function(status) {
					switch (status) {
						case 1:
							return '#5990F5'
							break;
						case 2:
							return '#31BA3E'
							break;
						case 3:
							return '#F94B30'
							break;
						case 4:
							return '#F99830'
							break;
					}
				}
			},
			backgroundComt() {
				return function(status) {
					switch (status) {
						case 1:
							return '#5990F5'
							break;
						case 2:
							return '#31BA3E'
							break;
						case 3:
							return '#F94B30'
							break;
						case 4:
							return '#F99830'
							break;
					}
				}
			},
		},
		methods: {
			//补办详情
			studentdetails() {
				uni.navigateTo({
					url: "/pagesLeave/everyday/studentdetails"
				})
			}

		}
	}
</script>

css样式

<style lang="scss" scoped>
	.card-item {
		padding: 32rpx;
		border-radius: 16rpx;
		margin-top: 24rpx;
		border-left-width: 12rpx;
		border-left-style: solid;
	}

	.public {
		padding: 4rpx 8rpx;
		color: #fff;
		font-size: 28rpx;
	}
</style>

效果图：