javascript - 在 VueJS 中为每个选中的复选框创建一个容器
问题描述
如何为每个选定的复选框制作一个容器?
选中复选框时,将出现一个容器,其中包含其值
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>
解决方案
试试下面的代码片段:
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>
推荐阅读
- python - 将列表转换为 Numpy 二维数组
- javascript - 通过 javascript 在 CSHTML 上显示来自字节 [] 的图像
- javascript - javascript函数遇到问题
- python - 2d 张量到一个 3d 张量的列表
- bpf - BPF 环形缓冲区无效参数 (-22)?
- fish - 测试是否未设置变量名
- python - python-telegram-bot 的数字键盘
- javascript - 如何在按钮内的图像中心对齐文本
- excel - 如何创建带有两条线的折线图?
- amazon-web-services - 我使用 AWS SES 发送电子邮件,我想查看电子邮件是否在不使用 SNS 的情况下打开,有没有办法?