Vue實(shí)現(xiàn)全選多個(gè)選擇框
Vue全選多個(gè)選擇框
可以使用 v-model 來(lái)綁定一個(gè)布爾類型的變量來(lái)實(shí)現(xiàn)全選多個(gè)選擇框的功能。
具體步驟
如下：
- 在
data中定義一個(gè)數(shù)組，用來(lái)存儲(chǔ)所有需要選擇的項(xiàng)的狀態(tài)。 - 在模板中使用
v-for指令循環(huán)渲染每個(gè)選擇框，并將每個(gè)選擇框的狀態(tài)綁定到數(shù)組中對(duì)應(yīng)的項(xiàng)上。 - 在模板中添加一個(gè)全選復(fù)選框，將其狀態(tài)綁定到一個(gè)布爾類型的變量上。
- 使用
watch監(jiān)聽(tīng)全選復(fù)選框的狀態(tài)變化，當(dāng)全選復(fù)選框的狀態(tài)改變時(shí)，遍歷數(shù)組中的每一項(xiàng)，將其狀態(tài)設(shè)置為全選復(fù)選框的狀態(tài)即可。
示例代碼
<template>
<div>
<input type="checkbox" v-model="selectAll"> 全選
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked"> {{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectAll: false,
items: [
{ label: '選項(xiàng)1', checked: false },
{ label: '選項(xiàng)2', checked: false },
{ label: '選項(xiàng)3', checked: false },
],
};
},
watch: {
selectAll(val) {
this.items.forEach(item => {
item.checked = val;
});
},
},
};
</script>在上面的代碼中，我們定義了一個(gè) selectAll 變量來(lái)表示全選復(fù)選框的狀態(tài)，一個(gè) items 數(shù)組來(lái)存儲(chǔ)所有需要選擇的項(xiàng)的狀態(tài)。
在模板中，使用 v-for 指令循環(huán)渲染每個(gè)選擇框，并將每個(gè)選擇框的狀態(tài)綁定到數(shù)組中對(duì)應(yīng)的項(xiàng)上。同時(shí)，還添加了一個(gè)全選復(fù)選框，并將其狀態(tài)綁定到 selectAll 變量上。
在 watch 中，監(jiān)聽(tīng) selectAll 變量的變化，當(dāng)它的狀態(tài)改變時(shí)，遍歷 items 數(shù)組中的每一項(xiàng)，將其狀態(tài)設(shè)置為 selectAll 的狀態(tài)即可實(shí)現(xiàn)全選功能。
結(jié)果展示
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解Vue雙向數(shù)據(jù)綁定原理解析 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue基于session和github-oauth2實(shí)現(xiàn)登錄注冊(cè)驗(yàn)證思路詳解
通過(guò) sessionId 可以在 session 表中獲取用戶的信息,此外,還利用 session 表實(shí)現(xiàn)了GitHub 的 OAuth2 第三方登錄,本文講解前端通過(guò)簡(jiǎn)單的方式實(shí)現(xiàn)一個(gè)基本的登錄注冊(cè)驗(yàn)證功能,感興趣的朋友跟隨小編一起看看吧2024-08-08
vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
在項(xiàng)目中會(huì)用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。在本文中，我們將研究如何通過(guò) Vite 開(kāi)發(fā) Vue 3 桌面項(xiàng)目，感興趣的可以了解一下2021-05-05
vue中ref()和reactive()區(qū)別小結(jié)
本文主要介紹了vue中ref()和reactive()區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(shù)，本文通過(guò)完整代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法
今天小編就為大家分享一篇vuejs+element UI table表格中實(shí)現(xiàn)禁用部分復(fù)選框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法
KML 文件作為一種標(biāo)準(zhǔn)的地理數(shù)據(jù)格式,廣泛應(yīng)用于地理信息系統(tǒng)（GIS）中,通過(guò) OpenLayers 和 Vue 3 的組合,您可以方便地實(shí)現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
Vue.js使用computed屬性實(shí)現(xiàn)數(shù)據(jù)自動(dòng)更新
在Vue組件中,computed屬性是在組件的選項(xiàng)對(duì)象中聲明的,你可以把它們想象成組件的一個(gè)小功能,告訴Vue當(dāng)某些數(shù)據(jù)變化時(shí),如何更新界面,本文給大家介紹了Vue.js使用computed屬性實(shí)現(xiàn)數(shù)據(jù)自動(dòng)更新,需要的朋友可以參考下2024-06-06
vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05