实现循环数据的多选

点击列表项可以选择或取消选择项目，并且允许多选，

<template>
  <div>
    <ul class="flex alignCenter space-between wrap">
      <li class="li" v-for="(item, index) in illList" :key="index"
          :class="{ activeColor: selectedItems.includes(item) }"
          @click="toggleSelection(item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      illList: ['高血压', '高血糖', '高尿酸', '高血脂', '冠心病', '脑供血', '甲状腺', '起搏器', '前列腺', '膝关节', '有无手术过往史', '器官有无摘除', '有无重大疾病', '有无支架', '钢板', '心脏', '牙齿', '眼睛', '乳房', '胰腺', '肠道', '妇科', '颈椎', '腰椎', '肺', '肝', '胆', '肾', '胃'],
      selectedItems: [] // 用于存储已选择的项目
    };
  },
  methods: {
    toggleSelection(item) {
      // indexOf() 找不到指定的子字符串，则返回-1。
      const index = this.selectedItems.indexOf(item);
      if (index > -1) {
        // 如果项目已被选中，则移除
        this.selectedItems.splice(index, 1);
      } else {
        // 如果项目未被选中，则添加
        this.selectedItems.push(item);
      }
    }
  }
};
</script>

<style scoped>
.activeColor {
  color: red; /* 当项目被选中时改变颜色 */
}
.flex {
  display: flex;
}
.alignCenter {
  align-items: center;
}
.space-between {
  justify-content: space-between;
}
.wrap {
  flex-wrap: wrap;
}
.li {
  margin: 5px;
  cursor: pointer;
}
</style>