vue多选

做项目的时候，产品需求需要多选，记录一下代码，以后可以直接使用，也想没有思路的伙伴提供一个代码：

1. data中的数据结构，我们必须要一个字段来记录当前的选中状态，我在这里使用了isActive来记录当前点击元素选中的状态

data() {
  return {
	diseasesList: [
	        {
	          isActive: false,
	          type: "blood_pressure",
	          name: "血压问题",
	        },
	        {
	          isActive: false,
	          type: "blood_sugar",
	          name: "血糖问题",
	        },
	        {
	          isActive: false,
	          type: "heart",
	          name: "心脏问题",
	        },
	        {
	          isActive: false,
	          type: "sleep",
	          name: "睡眠问题",
	        },
	        {
	          isActive: false,
	          type: "breath",
	          name: "呼吸问题",
	        },
	        {
	          isActive: false,
	          type: "joint",
	          name: "关节问题",
	        },
	      ],
	  }
	}
	  

2. 在template循环上面的diseasesList并且添加handletDiseasesClick点击事件，并切把当前点击的项传参

	 <div class="sickness-flex">
	    <div
	      :class="{ active: item.isActive }"
	      v-for="(item, index) in diseasesList"
	      :key="index"
	      @click="handletDiseasesClick(item, index)"
	    >
	      {{ item.name }}
	    </div>
	  </div>

3. 因为vue是响应式的，所以当你修改了当前项的isActive，data中的数据也会改变

  methods: {
    handletDiseasesClick(item, index) {
      item.isActive = !item.isActive;
    },
  },

4）样式 :class="{ active: item.isActive } 通过点击控制isActive 来展示active的样式

	.sickness-flex {
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}
	.sickness-flex .active {
	  background: #8b67a9;
	  color: #ffffff;
	}
	.sickness-flex div {
	  padding: 18px 35px;
	  box-sizing: border-box;
	  background: #f4f4f4;
	  border-radius: 60px;
	  margin: 30px 20px;
	  cursor: pointer;
	}

点击查看效果