v-for循环后改变其中一个样式

最新推荐文章于 2023-09-14 15:56:36 发布

独角兽的霸王龙

最新推荐文章于 2023-09-14 15:56:36 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/weixin_49351043/article/details/107615640

版权

<template>
	<view class="list" v-for="(item, index) in dataList" :key='index' :class="[index === 0? 'active' : '']">
		<text class="title">{{item.title}}</text>
		<input class="con" type="text" :placeholder="item.con" />
	</view>
</template>

<script>
export default {
		data() {
			return {
				show: false,
				dataList:[
					{
						title: '教育信息',
						con: '请输入你的学校',
					},
					{
						title: '我的职务',
						con: '请填写你的职务',
					},
					{
						title: '我的邮箱',
						con: '请填写邮箱',
					},
					{
						title: '我的手机',
						con: '请填写手机',
					}
				],
			}
		}
	}
</script>


<style scoped lang='scss'>
.list{
	padding-bottom:  30upx * $ratio;
	border-bottom: 3upx solid #dedede;
	margin-bottom: 20upx * $ratio;
			
}
.title{
	font-size: 38upx * $ratio;
	font-weight: bold;
}
.con{
	margin-top: 20upx * $ratio;
	font-size: 45upx * $ratio;
}
		
.active{
	border-bottom: none;
}
</style>