vue结合v-for和input实现多选列表checkbox功能
作者：码农褚
在Vue中,可通过v-for指令和v-model实现多选列表功能,首先,使用v-for指令遍历数组生成列表项,每个列表项包含一个复选框,复选框的v-model绑定到一个数组变量,用于存储选中的值,感兴趣的朋友跟随小编一起看看吧
在 Vue 中可以使用v-for指令结合数据绑定来实现多选列表。以下是具体步骤：
一、HTML 结构
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item">
{{ item.name }}
</li>
</ul>
</div>在上述代码中，使用v-for循环遍历items数组，为每个元素生成一个<li>标签。每个<li>标签中包含一个复选框和对应的文本内容。复选框的v-model绑定到selectedItems数组，用于存储被选中的项。
二、Vue 实例
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '选项 1' },
{ id: 2, name: '选项 2' },
{ id: 3, name: '选项 3' }
],
selectedItems: []
}
});在 Vue 实例中，定义了items数组作为原始数据，以及selectedItems数组用于存储被选中的项。
这样，当用户勾选复选框时，对应的项会被添加到selectedItems数组中，取消勾选时会从该数组中移除。
代码实例
template
<div class="list">
<div class="car-item" v-for="item in carList" :key="item.id" >
<input class="checkbox" type="checkbox" :value="item" @change="carSelectListChange" v-model="carSelectList"/>
<div class="name">{{item.name}}</div>
</div>
</div>js
<script>
export default {
name: "index",
data(){
return{
// 车辆表格数据
carList: [],
carSelectList:[],
}
},
methods:{
carSelectListChange(){
console.log(this.carSelectList)
}
}
}
</script>到此这篇关于vue结合v-for和input实现多选列表checkbox的文章就介绍到这了,更多相关vue多选列表checkbox内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！