思路:
1.拿到数组的每一个对象,通过页面渲染拿到;
2定义一个变量,让其默认值为0,
3为每个对象定义一个点击事件并传一个索引值(index)
4通过点击事件将索引值赋值给变量
5定义一个样式
6通过绑定样式,如果点击的对象其 变量===索引值,那么将样式赋值,否则为空

<view class="text-area"  v-for="(item,index) in arr" :key="item.index">
			<text :class="isActive===index? 'title':''" @click="btn(index)">{{item}}</text>
		</view>
export default {
		data() {
			return {
				arr:[
				'航海王','火影忍者','七龙珠'
				],
				isActive:0
			}
		},
methods: {
			btn(index){
				console.log(index)
				this.isActive = index
				console.log(this.isActive)
			}
            
		},
.title {
		font-size: 36rpx;
		color: pink;
	}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐