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