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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了如何通过Vue3实现简单的视频播放与截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要介绍的是如何用Vue做一个简单的随机点名册，主要是做个简单的点名器，不做样式,需要的朋友可以参考一下，希望对你有所帮助2021-12-12
这篇文章主要介绍了vue如何使用formData传递文件类型的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue本地打开build后生成的dist文件夹index.html问题
这篇文章主要介绍了vue本地打开build后生成的dist文件夹index.html问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-09-09
这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。需要的朋友可以参考下2018-11-11
文章介绍了如何在Vue项目中使用crypto-js库对浏览器参数进行加密和解密,以解决参数过长的问题,在router/index.js中添加了相关代码,并在utils工具类中添加了encryption.js和query.js源码,感兴趣的朋友一起看看吧2024-12-12
下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue项目中,main.js,App.vue,index.html的调用方法
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue3+TypeScript项目中,它适合组件通信、事件管理或复杂UI交互,本文给大家介绍Vue3+TypeScript实现中介者模式,感兴趣的朋友一起看看吧2025-06-06
这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压缩上传方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论