VueJS中如何通过标签取消勾选已选中的复选框

我明白你想要实现的效果——点击已选中复选框对应的标签，就能取消勾选它对吧？下面是调整后的完整实现方案，包含单复选框和多复选框的场景，直接就能运行：

HTML 部分 #

<div id="app">
  <!-- 单复选框示例 -->
  <div>
    <input type="checkbox" id="single" v-model="checkedName">
    <label for="single">单复选框选项</label>
    <span v-if="checkedName" class="badge badge-primary" @click="uncheck">点击我取消选中</span>
  </div>

  <!-- 多复选框示例 -->
  <div>
    <ul class="checkboxes">
      <li>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
      </li>
      <li>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
      </li>
      <li>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
      </li>
    </ul>

    <!-- 选中的标签列表，点击可取消 -->
    <ul class="tags">
      <li v-for="name in checkedNames" :key="name" class="badge badge-primary" @click="removeTag(name)">
        {{ name }}
      </li>
    </ul>
  </div>
</div>

JavaScript 部分 #

new Vue({
  el: '#app',
  data: {
    checkedNames: [], // 多复选框选中值数组
    checkedName: true // 单复选框选中状态
  },
  methods: {
    // 单复选框取消选中方法
    uncheck: function() {
      this.checkedName = !this.checkedName;
    },
    // 多复选框移除标签（取消选中）方法
    removeTag: function(name) {
      // 找到该名称在数组中的索引并删除
      const index = this.checkedNames.indexOf(name);
      if (index !== -1) {
        this.checkedNames.splice(index, 1);
      }
    }
  }
})

CSS 部分 #

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}
ul.checkboxes {
  list-style: none;
  padding-left: 0;
}
ul.tags {
  margin-top: 10px;
  margin-left: 0;
  list-style: none;
  padding-left: 0;
}

关键说明 #

• 单复选框场景：通过v-model绑定checkedName布尔值，点击标签时调用uncheck方法直接反转状态即可。
• 多复选框场景：v-model绑定数组checkedNames，点击标签时调用removeTag方法，通过indexOf找到对应值的索引，再用splice从数组中移除，Vue会自动同步复选框的选中状态。
• 调整了CSS的间距，让布局更合理，避免重叠问题。

内容的提问来源于stack exchange，提问作者user6579211