css实现序号的编写

关键:定义class=“my”
在需要序号的地方定义 class=“num”
然后主要的是css样式

<template>
	<div  class="my">
		<!-- 主题 -->
		<div class="contant">
			<ul>
				<ol class="msg" v-for="item in items" :key="item.id">
					<div class="flex">
						<div class="num">{{item.nickname}}</div>
						<div>等级:VIP{{item.level}}</div>
					</div>
					<div class="flex">
						<div>用户状态:<span class="ys2" v-if="item.isActive == false">未激活</span>
							<span class="ys2" v-else-if="item.isActive == true">已激活</span></div>
						<div class="ys" @click="lowerLevel(item.mobile,item.nickname)">查看下级</div>
					</div>
				</ol>
			</ul>
		</div>
	</div>
</template>
<style scoped>
	.my {
		counter-reset: index;
	}
	.my .num:before {
		content: counter(index);
		counter-increment: index;
	}
</style>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值