微信小程式開發筆記(十)--多選标簽效果

1.wxml：

<block wx:for=\'{{itemList}}\' wx:key="id">
    <view class="{{item.isSelected?\'_on\':\'\'}}" bindtap=\'itemSelected\' data-index=\'{{index}}\'><text>{{item.name}}</text></view>
</block>      

2.wxss：

._on {
  color: #1DB1CF;
  border: 1rpx solid #1DB1CF;
}      

3.wxjs：

Page({
  data: {
    itemList: [{
        id: 1,
        name: \'五險一金\',
        isSelected: false,
      },
      {
        id: 2,
        name: \'包吃包住\',
        isSelected: false,
      },
      {
        id: 3,
        name: \'朝九晚五\',
        isSelected: false,
      },
    ]
  },

  itemSelected: function (e) {
    let index = e.currentTarget.dataset.index;
    let item = this.data.itemList[index];
    item.isSelected = !item.isSelected;
    this.setData({
      itemList: this.data.itemList,
    });
  },
})