uniapp 动态修改class 样式

最新推荐文章于 2024-08-23 20:07:05 发布

龙之吻

最新推荐文章于 2024-08-23 20:07:05 发布

阅读量3.4k

点赞数 1

分类专栏： uniApp 文章标签： uni-app

本文链接：https://blog.csdn.net/ltf857/article/details/118758707

版权

uniApp 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue.js中如何使用v-for指令动态渲染城市列表，并结合:class和@click事件处理来改变选中城市的背景色。通过绑定样式类'on'实现选中状态的视觉反馈，同时展示了在模板中使用表达式控制样式的方法。

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

<view class="city-list">
			<view v-for="(item,index) in listsCities" :key="index" class="city"
				:class="{'on':selectCity == item.title}">
				<text @tap="cityOnClick(item)" class="hot-text">{{item.title}}</text>
			</view>
		</view>

:class=“” 里面是用{}括起来
on的样式

.city {
			width: 140upx;
			height: 50upx;
			flex-direction: row;
			display: flex;
			background-color: #F5F6F8;
			margin: 20upx;
			justify-content: center;
			align-items: center;

			text {
				color: #111;
			}
			
			&.on {
				background-color: #4180e9;
				
				text {
					color: #fff;
				}
			}
		}