v-if 实现不同的状态样式

目录

一、实现思路

二、实现步骤

        案例一：

        ①view部分展示

        ②JavaScript 内容

        ④ 效果展示

案例二：

     ①view部分展示

     ②JavaScript 内容

        ④ 效果展示

​编辑

---

一、实现思路

        通过v-for循环获取数据并进行判断该条记录中status的状态

        给不同的状态赋值，在div种去判断状态。

二、实现步骤

        案例一：

        ①view部分展示

                

	<template v-for="(item2, index2) in tarList">
						<view class="itemtitle" :key="index2">
							<view v-if="item2.statuse == 1" class="public-root" style="color: #5990F5;background: #E6EFFE;">
								待审批</view>
							<view v-if="item2.statuse == 2" class="public-root" style="color: #31BA3E;background: #E0F5E2;">
								已通过</view>
							<view v-if="item2.statuse == 3" class="public-root" style="color: #F94B30;background: #FEE4E0;">
								未通过</view>
							<view v-if="item2.statuse == 4" class="public-root" style="color: #F99830;background: #FEF0E0">
								已取消</view>
							<view class="flex-between" style="margin-top: 24rpx;">
								<view style="color: #1A1A1A;font-size: 32rpx; font-weight: bold;letter-spacing: 2rpx;">
									{{item2.totile}}
								</view>
								<view style="color: #5990F5; font-size: 32rpx;">{{item2.satly}}</view>
							</view>
							<view class="flex-colomn">
								<view class="itemcom">工作时间：{{item2.atime}}</view>
								<view class="itemcom">经验要求：{{item2.demand}}</view>
							</view>
						</view>
					</template>

        ②JavaScript 内容

//列表
				statuse:1,
				tarList: [{
						statuse: 1,
						totile: "办公室助理",
						satly: "200/天",
						atime: '周一',
						demand: "经验好"
					},
					{
						statuse: 2,
						totile: "图书馆管理员",
						satly: "200/天",
						atime: '周一',
						demand: "经验好"
					},
					{
						statuse: 3,
						totile: "图书馆管理员",
						satly: "200/天",
						atime: '周一',
						demand: "经验好"
					},
				],

                

        ④ 效果展示

案例二：

        只是样式，布局不同，思路都是相同的。

     ①view部分展示

     ②JavaScript 内容

<template>
	<view style="padding-bottom: 100px;">
		<f-navbar title="留校记录" navbarType="3"></f-navbar>
		<template v-for="(item,index) in funtcList">
			<view style="padding: 32rpx; background-color: #fff;margin: 24rpx;border-radius: 16rpx;" :key="index" @click="destdetails">
				<view class="flex-between">
					<view class="flex">
						<view v-if="item.statuse == 1" class="public-radius" style="background-color:#5990F5;">
						</view>
						<view v-if="item.statuse == 2" class="public-radius" style="background-color:#31BA3E;">
						</view>
						<view v-if="item.statuse == 3" class="public-radius" style="background-color: #F94B30;">
						</view>
						<view v-if="item.statuse == 4" class="public-radius" style="background-color: #F99830;">
						</view>
						<view class="flex">
							<view style="color: #1A1A1A;font-size: 32rpx;">{{item.satime}}</view>
							<text style="color: #999999; font-size: 32rpx;margin: 0 10rpx 0 ;">至</text>
							<view style="color: #1A1A1A;font-size: 32rpx;">{{item.endtime}}</view>
						</view>
					</view>
					<view v-if="item.statuse == 1" class="public-root"
						style="color: #5990F5; background-color: #E6EFFE ; ">
						待审批</view>
					<view v-if="item.statuse == 2" class="public-root"
						style="color: #31BA3E; background-color: #E0F5E2 ; ">
						已通过</view>
					<view v-if="item.statuse == 3" class="public-root"
						style="color:#F94B30; background-color: #FEE4E0; ">
						未通过</view>
					<view v-if="item.statuse == 4" class="public-root"
						style="color: #F99830; background-color:#FEF0E0; ">
						已取消</view>
				</view>
				<view style="margin-top: 16rpx;margin-left: 30rpx;">
				<u--text :text="item.caroot" :lines="1" :size="14" color="#999"/>
				</view>
			</view>
		</template>
		
		<view class="flex" style="position: fixed;left: 35%; color: #999999; font-size: 28rpx;">
			暂无更多信息
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 请假记录
				statuse: 1,
				// 待审核
				funtcList: [{
					statuse: 2,
					satime: "2020202002200",
					endtime: "20200202",
					caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
				}, {
					statuse: 1,
					satime: "2020202002200",
					endtime: "20200202",
						caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
				},{
					statuse: 3,
					satime: "2020202002200",
					endtime: "20200202",
						caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
				}, {
					statuse: 4,
					satime: "2020202002200",
					endtime: "20200202",
						caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
				}, ],
			}
		},
		methods: {
		destdetails(){
			uni.navigateTo({
				url: "/pagesLeave/everyday/destdetails"
			})
		}
		}
	}
</script>

<style lang="scss" scoped>
	.public-root {
		margin-left: 8rpx;
		padding: 2rpx 4rpx;
	}

	.public-radius {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
</style>

        ④ 效果展示