Mikel
来源： 微信小程序动态修改样式_kkk_3399的博客-CSDN博客_小程序动态修改样式
前言
微信小程序动态修改样式：循环数组显示到页面，点击单独的按钮变换单独样式
一、wxml
<view class=”fb_tips”
wx:for=”{{arr11}}”
wx:key=”id”
>
<text class=”title_item {{item.isActive?’active’:”}} ”
bindtap=”clickpp” data-index=”{{index}}”
>{{item.value}}</text>
</view>
二、js
代码如下（示例）：
Page({
data: {
arr11:[
{
id: 0,
value: “功能建议”,
isActive:false
},{
id: 1,
value: “购买遇到问题”,
isActive:false
},{
id: 2,
value: “性能问题”,
isActive:true
},{
id: 3,
value: “其他”,
isActive:false
}
]
},
clickpp(e) {
// 页面data-index传进来的索引
const index=e.currentTarget.dataset.index;
// console.log(index);
console.log(this.data.arr11[index].isActive);
// 拼接字符串
const isActive=`arr11[${index}].isActive`
// 使用setData修改当行数据
this.setData({
[isActive]: !this.data.arr11[index].isActive
})
// 打印数据
console.log(this.data.arr11[index].isActive);
}
})
三、wxss
.fb_tips {
display: flex;
flex-wrap: wrap;
}
.fb_tips text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
.fb_tips .active{
color:var(–themeColor);
border-bottom: 5rpx solid currentColor;
}
————————————————
版权声明：本文为CSDN博主「kkk_3399」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kkk_3399/article/details/127678638
