:class 循环ui 里面的li 选择哪一个给哪一个加选中的样式，初始化选择第一个

星辰.

已于 2024-01-31 16:35:58 修改

阅读量511

点赞数 9

CC 4.0 BY-SA版权

文章标签： ui 前端 javascript css sass html

于 2024-01-31 16:35:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_67385044/article/details/135956683

有一个这个场景，只能手写，然后好长时间没有用:class,差点忘记，写完赶紧记录一下，

以下是代码

<view class="select-item" :class="{active:index == selectedIndex }" v-for="(item,index) in list"
					:key="index" @click="selectItem(index)">
					{{item.name}}
				</view>

data() {
			return {
				selectedIndex: 0, // 默认选中第一个元素  
			}
		},

selectItem(index) {
				this.selectedIndex = index; // 更新选中元素的索引  
			},

.active {  
  border: 2rpx solid rgba(0, 130, 231, 1); 
}

如果对你有帮助请动动发财的小手点个赞噢！