uniapp数据渲染点击改变当前值颜色
思路:1.拿到数组的每一个对象,通过页面渲染拿到;2定义一个变量,让其默认值为0,3为每个对象定义一个点击事件并传一个索引值(index)4通过点击事件将索引值赋值给变量5定义一个样式6通过绑定样式,如果点击的对象其 变量===索引值,那么将样式赋值,否则为空<view class="text-area"v-for="(item,index) in arr" :key="item.index
·
思路:
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;
}
更多推荐
已为社区贡献5条内容
所有评论(0)