前言

微信小程序动态修改样式：循环数组显示到页面，点击单独的按钮变换单独样式

一、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;}