vue多选框的联动效果

效果预览图 image.png

 <h1>多选联动效果</h1>
    <div class="Flex   ">
      <ul class="heart">
        <li
          v-for="item in heartData"
          :key="item.value"
          @click="showD(item)"
          :class="{'active':item.show===true}"
        >{{item.name}}</li>
      </ul>
        <label
          v-for="(item,index) in heartData"
          :key="index"
          :class="{'active':item.show===true}"
          v-bind:style="item.site"
        >
          <input type="checkbox" @click="showD(item)" />
          {{item.value}}
        </label>
    </div>

数据处理

data() {
    return {
      checkedData: [],//选中的数据
      //数据
     heartData: [
        {
          value: 1,
          name: "孙小胖1",
          show: false,
          site: "left:136px;top:38px"//数字定位
        },
        {
          value: 2,
          name: "孙小胖2",
          show: false,
          site: "left:397px;top:168px"
        },
        {
          value: 3,
          name: "孙小胖3",
          show: false,
          site: "left:372px;top:0px"
        },
      ],
      selectCon: "" //返回的当前选中数据
    };
  },
//点击事件
  showD(item) {
      let that = this;
      // 选中取消
      item.show = !item.show;
      //当前选中的数据
      this.checkedData = this.heartData.filter(item =>{
        return item.show == true;
      });
      //当前选中数据
      this.selectCon = "";
      for (var i = 0;i < this.checkedData.length; i++) {
        this.selectCon += this.checkedData[i].name + "  ";
      }
    console.log(this.selectCon);
    console.log(this.checkedData);
    }

样式

label {
  display: block;
  line-height: 52px;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  background: #f3f3f3;
  border: 1px solid #d7d7d7;
  position: absolute;
}
input[type="checkbox"] {
  display: none;
}
.heart li {
  line-height: 40px;
  border: 1px solid #d7d7d7;
  padding: 0 20px;
}
.active {
  background: #2dd1fc;
  border: 1px solid #fff !important;
  color: #fff;
}