在VueJS中如何为每个选中的复选框生成对应展示容器？

实现方案 #

你可以利用Vue的列表渲染指令v-for遍历已选中的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:</span>
  <!-- 动态生成选中项独立容器 -->
  <div class="checked-item" v-for="(name, index) in checkedNames" :key="index">
    {{ name }}
  </div>
</div>

<style>
/* 容器基础样式，可按需调整 */
.checked-item {
  display: inline-block;
  margin: 8px 4px 0 0;
  padding: 4px 12px;
  border: 1px solid #409eff;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}
</style>

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

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