vue制作一个最基本的待选、已选demo

<template>
  <div class="box">
    <div>
      <p>待选：</p>
      <span
        v-for="(item, index) in array"
        :key="index"
        :class="[{ active: item.isCheck }]"
        @click="addTag(index)"
        >{{ item.name }}</span
      >
    </div>
    <div>
      <p>已选：</p>
      <span
        v-for="(item, index) in array"
        :key="index"
        v-show="item.isCheck"
        @click="removeTag(index)"
        >{{ item.name }}<i></i
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { isCheck: false, name: "语文" },
        { isCheck: false, name: "数学" },
        { isCheck: false, name: "英语" },
        { isCheck: false, name: "物理" },
      ],
    };
  },
  methods: {
    addTag(index) {
      this.array[index].isCheck = true;
    },
    removeTag(index) {
      this.array[index].isCheck = false;
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  span {
    margin: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
  }
  .active {
    background: orange;
  }
}
</style>