微信小程序循环嵌套循环，并且可以操作改变样式

雨点打透心脏的1/2处 2023-06-11 12:24 10阅读 0赞

项目中有用到一个功能，循环列表中有一个循环，并且这个循环有功能，例如评价商品列表里的选择评价的标签  
![在这里插入图片描述][20191030173251421.png]  
可以选中也可以取消。  
wx:for-item="items"为给列表赋别名

<view wx:for="{ {list}}" wx:key="i">
    	
    	<view wx:for="{ {item.text}}" wx:key="index" wx:for-item="items">
    		<text bindtap="changeBtn" class="LaberList { {items.yesId==1 ? 'checkLaber' : ''}}" data-id="{ {i}}" data-index="{ {index}}">{
       {items.name}}</text>
      	</view>
    </view>

data:{ 
    	list:[
    		{ text:[{ name:'做工精美',yesId:0},{ name:'实用',yesId:0},{ name:'非常棒',yesId:0}]},
    		{ text:[{ name:'做工精美',yesId:0},{ name:'实用',yesId:0},{ name:'非常棒',yesId:0}]},
    		{ text:[{ name:'做工精美',yesId:0},{ name:'实用',yesId:0},{ name:'非常棒',yesId:0}]}
    	]
    }
    changeBtn(e){ 
    	let that=this
        let check = 'list['+e.currentTarget.dataset.id+'].text['+e.currentTarget.dataset.index+'].yesId'
        if (e.currentTarget.dataset.yes_id==0){  //选中评论标签
          that.setData({ 
            [check]:1	//重新赋值
          })
        } else {   //取消选中评论标签
          that.setData({ 
            [check]: 0
          })
        }
    }

在这里要注意2点，微信小程序在修改某个值下的数组中的某个数值，用拼接来确定需要改的键名（**let check = ‘list\[’+e.currentTarget.dataset.id+’\].text\[’+e.currentTarget.dataset.index+’\].yesId’**），然后在setData里要把键名放在\*\*\[\]\*\*里， （ **\[check\]**），直接check的话，赋值不会成功。

[20191030173251421.png]: /images/20230531/4abdccd0a7944d7bb3eae38fc24a4323.png