SOURCE

new Vue({
  el: '#example-3',
  data: {
    checkedDataNames: [],
    checkedAllocateNames: [],
    checkedProcessNames: [],
    checkedCheckNames: [],
    dataList: [{
      name: "今天",
      class: ""
    },
    {
      name: "明天",
      class: ""
    },
    {
      name: "本周",
      class: ""
    },
    {
      name: "本月",
      class: ""
    },
    {
      name: "其他",
      class: ""
    }],
    allocateList: [{
      name: "今天",
      class: ""
    },
    {
      name: "昨天",
      class: ""
    },
    {
      name: "本周",
      class: ""
    },
    {
      name: "本月",
      class: ""
    },
    {
      name: "其他",
      class: ""
    }],
    processList: [{
      name: "待处理"
    },
    {
      name: "处理中"
    },
    {
      name: "已完成"
    }],
    checkList: [{
      name: "待复核"
    },
    {
      name: "已复核"
    },
    {
      name: "退回"
    }]
  },
  methods: {
    chData(item) {
      if (item.class == '') {
        this.checkedDataNames.push(item.name);
        item.class = 'red'
      } else {
        let a = [];
        this.checkedDataNames.forEach(function(data) {
          if (data != item.name) a.push(data);
        });
        this.checkedDataNames = [];
        this.checkedDataNames = a;
        item.class = '';
      }
      console.log(this.checkedDataNames)
    },
    chAllocate(item) {
      if (item.class == '') {
        this.checkedAllocateNames.push(item.name);
        item.class = 'red'
      } else {
        let a = [];
        this.checkedAllocateNames.forEach(function(data) {
          if (data != item.name) a.push(data);
        });
        this.checkedAllocateNames = [];
        this.checkedAllocateNames = a;
        item.class = '';
      }
    },
    unique(arr) {
      var result = [],
      hash = {};
      for (var i = 0,
      elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem]) {
          result.push(elem);
          hash[elem] = true;
        }
      }
      return result;
    },
    submit() {
      console.log(this.unique(this.checkedDataNames), this.unique(this.checkedAllocateNames), this.checkedProcessNames, this.checkedCheckNames)
    }
  }
})

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">
</script>
<div id='example-3'>
  <div>
    数据日期：
    <template v-for="item in dataList">
      <span :class="item.class" @click="chData(item)">
        {{item.name}}
      </span>
    </template>
  </div>
  <div>
    分配日期：
    <template v-for="item in allocateList">
      <span :class="item.class" @click="chAllocate(item)">
        {{item.name}}
      </span>
    </template>
  </div>
  <div>
    处理状态：
    <template v-for="item in processList">
      <input type="checkbox" :id="item.name" :value="item.name" v-model="checkedProcessNames">
      <label :for="item.name">
        {{item.name}}
      </label>
    </template>
  </div>
  <div>
    复核状态：
    <template v-for="item in checkList">
      <input type="checkbox" :id="item.name" :value="item.name" v-model="checkedCheckNames">
      <label :for="item.name">
        {{item.name}}
      </label>
    </template>
  </div>
  <br />
  <input type="button" value="提交" @click="submit()" />
</div>

.red {
  color: red
}

span {
  margin-right: 5px;
}