vue結(jié)合v-for和input實(shí)現(xiàn)多選列表checkbox功能
在 Vue 中可以使用v-for指令結(jié)合數(shù)據(jù)綁定來(lái)實(shí)現(xiàn)多選列表。以下是具體步驟：
一、HTML 結(jié)構(gòu)
<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循環(huán)遍歷items數(shù)組，為每個(gè)元素生成一個(gè)<li>標(biāo)簽。每個(gè)<li>標(biāo)簽中包含一個(gè)復(fù)選框和對(duì)應(yīng)的文本內(nèi)容。復(fù)選框的v-model綁定到selectedItems數(shù)組，用于存儲(chǔ)被選中的項(xiàng)。
二、Vue 實(shí)例
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '選項(xiàng) 1' },
{ id: 2, name: '選項(xiàng) 2' },
{ id: 3, name: '選項(xiàng) 3' }
],
selectedItems: []
}
});在 Vue 實(shí)例中，定義了items數(shù)組作為原始數(shù)據(jù)，以及selectedItems數(shù)組用于存儲(chǔ)被選中的項(xiàng)。
這樣，當(dāng)用戶(hù)勾選復(fù)選框時(shí)，對(duì)應(yīng)的項(xiàng)會(huì)被添加到selectedItems數(shù)組中，取消勾選時(shí)會(huì)從該數(shù)組中移除。
代碼實(shí)例
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{
// 車(chē)輛表格數(shù)據(jù)
carList: [],
carSelectList:[],
}
},
methods:{
carSelectListChange(){
console.log(this.carSelectList)
}
}
}
</script>到此這篇關(guān)于vue結(jié)合v-for和input實(shí)現(xiàn)多選列表checkbox的文章就介紹到這了,更多相關(guān)vue多選列表checkbox內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個(gè)常見(jiàn)的需求,Vue 提供了多種方法來(lái)實(shí)現(xiàn)這一目標(biāo),包括 props、全局事件總線(xiàn)、消息的訂閱與發(fā)布等,下面我們就來(lái)學(xué)習(xí)一下這些方法的具體實(shí)現(xiàn)吧2023-12-12
基于Vue.js實(shí)現(xiàn)一個(gè)完整的登錄功能
在現(xiàn)代Web應(yīng)用中,用戶(hù)登錄功能是一個(gè)核心模塊,它不僅涉及到用戶(hù)身份驗(yàn)證,還需要處理表單驗(yàn)證、狀態(tài)管理、接口調(diào)用等多個(gè)環(huán)節(jié),本文將基于一個(gè)Vue.js項(xiàng)目中的登錄功能實(shí)現(xiàn),深入解析其背后的技術(shù)細(xì)節(jié),幫助開(kāi)發(fā)者更好地理解和實(shí)現(xiàn)類(lèi)似功能,需要的朋友可以參考下2025-02-02
在Vue2項(xiàng)目中使用Mock.js的詳細(xì)教程
Mock.js?是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請(qǐng)求的?JavaScript?庫(kù),它非常適合在前端開(kāi)發(fā)中模擬后端?API,尤其是在前后端分離的開(kāi)發(fā)模式下,本文給大家介紹了如何在Vue2項(xiàng)目中使用Mock.js,需要的朋友可以參考下2024-10-10
vue-cli 是 vue 官方團(tuán)隊(duì)推出的一款快速開(kāi)發(fā) vue 項(xiàng)目的構(gòu)建工具，具有開(kāi)箱即用并且提供簡(jiǎn)潔的自定義配置等功能。這篇文章主要介紹了快速了解vue-cli 3.0 新特性,需要的朋友可以參考下2018-02-02
本文主要介紹了vue-json-editor json編輯器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vuejs實(shí)現(xiàn)下拉框菜單選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue3?+?antv/x6實(shí)現(xiàn)流程圖的全過(guò)程
隨著互聯(lián)網(wǎng)的發(fā)展,越來(lái)越多的應(yīng)用需要實(shí)現(xiàn)流程圖的制作,如工作流程圖、電路圖等,文中通過(guò)代碼以及圖文將實(shí)現(xiàn)的過(guò)程介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08