小程序多个标签点击高亮和取值

标签数据在data中定义， 因为还要点击高亮， 所以同时给个状态值

data: {
    selectall: [{
      title: "视频制作",
      isSelect: false
    }, {
      title: "文创开发",
      isSelect: false
    }, {
      title: "影视后期",
      isSelect: false
    }, {
      title: "活动策划",
      isSelect: false
    }, {
      title: "互联网营销",
      isSelect: false
    }, {
      title: "其他",
      isSelect: false
    }]
  },

页面循环渲染出来
点击事件bindtap='select',
绑定class: class="{{item.isSelect?'active':'select'}}", 点击的时候改变类名
自定义dataset :data-index="{{index}}"

标签
  
    
      {{item.title}}
    
  

.tagArea{
  margin-top: 40rpx;
}

.select{
  display: inline-block;
  line-height: 50rpx;
  padding: 14rpx 26rpx;
  margin: 10rpx 10rpx;
  font-size: 24rpx;
  background: #e6e6e6;
  color: #999;
  border: none;
  border-radius: 16rpx;
}
.active{
  display: inline-block;
  background: #f44232;
  color: #fff;
  box-shadow: 0 5rpx 15rpx #f44232;
  font-size: 24rpx;
  padding: 14rpx 26rpx;
  margin: 10rpx 10rpx;
  border-radius: 16rpx;
  line-height: 50rpx;
}

样式效果

已经点击的和没有点击的效果.png

JS部份

select(event) {
    let index = event.target.dataset.index
    this.data.selectall[index].isSelect = !this.data.selectall[index].isSelect;
    this.setData({
      selectall: this.data.selectall
    })
  },

到这儿, 高亮的就已经写好了. 怎么取值呢? 下面还有一个保存按钮. 给保存按钮一个点击事件:
1.定义一个空数据
2.遍历上边的data里的selectall数组, 传两个参数, v是所有标签的状态(比如isSelect:false或isSelect:true), i是下标.

3. 判断如果状态是true , 就push到数组里

submit(){
    let all = [];
    this.data.selectall.forEach((v,i)=>{
      console.log(v + i)
      if(v.isSelect){
        all.push(v)
      }
    })
    console.log(all);
  }

看打印结果

高亮的标签状态为true.png