vue中不同的状态对应不同的样式

vue中不同的状态对应不同的样式

在具体的开发中，不同的状态应该对应不同的样式。
这里我给大家举个列子，
当周末的时候，状态处于放假中；
当处于周一时，状态处于上课中。
这时候可以利用vue的计算属性来写：

computed: {
		stateConputed(val) {
			return function(val) {
				let returnData = this.stateList.filter(item => {
					return item.state === val;
				});
				return returnData[0];
			};
		}
	}

具体代码和效果，如下所示：

<template>
	<view class="content">
		<view class="list" v-for="(item, index) in list" :key="index" @click="handleClickDetail">
			<view class="list-top">
				<view class="list-top-left">
					<text>{{ item.time }}</text>
				</view>
				<view class="list-top-right" :style="{ 'background-color': stateConputed(item.state).color }">
					<text>{{ stateConputed(item.state).name }}</text>
				</view>
			</view>
			<view class="list-bottom">
				<view class="list-bottom-item">
					<text class="name">姓名</text>
					<text class="name-list">{{ item.people }}</text>
				</view>
				<view class="list-bottom-item">
					<text class="name">内容</text>
					<text class="name-list">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stateList: [
				{
					state: 1,
					name: '放假中',
					color: '#1CC8EE'
				},
				{
					state: 2,
					name: '上课中',
					color: '#00BA88'
				}
			],
			list: [
				{ time: '周末', state: 1, people: '派大星', text: '我要去游乐园' },
				{ time: '周一', state: 2, people: '海绵宝宝', text: '数学、英语、语文' }
			]
		};
	},
	computed: {
		stateConputed(val) {
			return function(val) {
				let returnData = this.stateList.filter(item => {
					return item.state === val;
				});
				return returnData[0];
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 32rpx 24rpx;
	box-sizing: border-box;
	background: #f7f7fc;
	.list {
		width: 100%;
		opacity: 1;
		background: #ffffff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		padding: 50rpx 56rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.list-top {
			display: flex;
			justify-content: space-between;
			.list-top-left {
				display: flex;
				align-items: center;
				text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
					color: #e4b3fc;
					margin-left: 17rpx;
				}
			}
			.list-top-right {
				width: 130rpx;
				height: 48rpx;
				opacity: 1;
				border-radius: 6rpx;
				text-align: center;
				line-height: 48rpx;
				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #ffffff;
				}
			}
		}
		.list-bottom {
			display: flex;
			flex-direction: column;
			.list-bottom-item {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.name {
					width: 64rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #888888;
					margin-right: 32rpx;
				}
				.name-list {
					width: 80%;
					// height: 88rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
}
</style>