vue结合v-for和input实现多选列表checkbox功能
更新时间：2024年09月26日 10:30:26 作者：码农褚
在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue.js 中,组件之间的数据传递是一个常见的需求,Vue 提供了多种方法来实现这一目标,包括 props、全局事件总线、消息的订阅与发布等,下面我们就来学习一下这些方法的具体实现吧2023-12-12
在现代Web应用中,用户登录功能是一个核心模块,它不仅涉及到用户身份验证,还需要处理表单验证、状态管理、接口调用等多个环节,本文将基于一个Vue.js项目中的登录功能实现,深入解析其背后的技术细节,帮助开发者更好地理解和实现类似功能,需要的朋友可以参考下2025-02-02
Mock.js 是一个用于生成随机数据和拦截 Ajax 请求的 JavaScript 库,它非常适合在前端开发中模拟后端 API,尤其是在前后端分离的开发模式下,本文给大家介绍了如何在Vue2项目中使用Mock.js,需要的朋友可以参考下2024-10-10
vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下2018-02-02
本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
随着互联网的发展,越来越多的应用需要实现流程图的制作,如工作流程图、电路图等,文中通过代码以及图文将实现的过程介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-06-06
这篇文章主要为大家详细介绍了vue实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例
本文主要介绍了Vue2+SpringBoot实现数据导出到csv文件并下载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论