循环渲染多个复选框checkbox

主要展示通过后台数据，循环渲染多个复选框，并解决同时选中和同时取消的问题。

思路：

1. 定义一个div容器，里面包含多个复选框，复选框的数据来源是后台数据，为数组

2. 在div容器标签中，接收该数组, v-for循环渲染

3. 通过Input标签，获取复选框的选中状态，使用v-model

4. 注意：isChecked的值为[ ]空数组。因为多个复选框的选中状态也不一样，需要接收多个状态，多个要用数组的形式接收。有些人使用true/false，结果一点击复选框，就会全选，全部都是一个状态

<!-- 最外层容器，用于包含内容-->
<div>
   <!--标题-->
   <h1>请选择你喜欢的专栏</h1>
    <!--循环渲染，正式开始，定义一个div，用于接收后台数据-->
    <div v-for="item in lists" :key="item">
      <!--此处的id是为了绑定label标签，用以显示复选框的文字内容-->
      <input type="checkbox" id="check" v-model="isChecked" :value="item" />
      <!--文字内容-->
      <label for="check">{{ item }}</label>
    </div>
</div>

后台数据：

export default {
  data() {
    return {
      //需要被循环渲染的数据
      lists: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      //选中状态
      isChecked: []
    }
  }
}

效果：

完结撒花！