在 VueJS 中为每个选中的复选框创建一个容器答案

【问题标题】：Make a container for each selected checkbox in VueJS在 VueJS 中为每个选中的复选框创建一个容器
【发布时间】：2021-10-14 00:20:25
【问题描述】：

如何为每个选中的复选框创建一个容器？

like in this image

选中复选框时，会出现一个容器，其中包含其值

new Vue({
  el: '#vue-container',
  data: {
    checkedNames: []
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='vue-container'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>

</div>

【问题讨论】：

有什么问题？您的代码似乎有效。

标签： javascript vue.js checkbox

【解决方案1】：

尝试如下 sn-p:

new Vue({
  el: '#vue-container',
  data: {
    checkedNames: []
  }
})

ul {
  display: flex;
  list-style: none;
  align-items: center;
}
li {
  padding: 2px 8px;
  margin: 5px;
  border: 1px solid grey;
  border-radius: 1em;
  background: #66FF99;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='vue-container'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <ul>
    <span>Checked names:</span>
    <li v-for="name in checkedNames" :key="name">
      {{ name }}
    </li>
  </ul>
</div>

【讨论】：