微信小程序如何实现通过js修改wxml的for循环中的属性值

超、凢脫俗 2022-09-11 01:16 101阅读 0赞

### 微信小程序如何实现通过js修改wxml的for循环中的属性值 ###

*   *  要实现的效果
     *  具体代码

## 要实现的效果 ##

点击每一个活动选项，实现显示对应的操作按钮

![在这里插入图片描述][1db84d81f48d45aa9978b0f2372de5d9.png]

## 具体代码 ##

首先要在对应页面的js中给data中定义数组，如下：

data: { 
        vote_list: [{ 
          'vote_title': '活动1',
          'vote_show': 'none'
        }, { 
          'vote_title': '活动2',
          'vote_show': 'none'
        }, { 
          'vote_title': '活动3',
          'vote_show': 'none'
        }],
      },

在wxml页面中循环显示

<view class="section" wx:for="{ {vote_list}}" wx:key="index">
      <view class="section_title" bindtap="voteAction" data-index="{ {index}}">{
       {item.vote_title}}</view>
      <view class="section_title" style="display: { { item.vote_show}};">
        <view class="section_title" bindtap="edit">编辑</view>
        <view class="section_title" bindtap="delete">删除</view>
      </view>
    </view>

在js中增加voteAction 绑定事件

voteAction: function (e) { 
        console.log('voteAction-e', e);
        var index = e.currentTarget.dataset.index;
        var vote_list = this.data.vote_list;
        console.log('vote_show==', vote_list[index].vote_show);
        if (vote_list[index].vote_show == 'none') { 
          vote_list[index].vote_show = 'block';
        } else { 
          vote_list[index].vote_show = 'none';
        }
        this.setData({ 
          vote_list: vote_list
        })
      },

[1db84d81f48d45aa9978b0f2372de5d9.png]: /images/20220829/45d7e785b59048be8124ec29988104d7.png