vue中實(shí)現(xiàn)checkbox回顯效果
更新時(shí)間：2023年12月05日 17:06:19 作者：anshengsuiyeu
這篇文章主要介紹了vue中實(shí)現(xiàn)checkbox回顯效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)checkbox回顯效果
當(dāng)我選中多選框，點(diǎn)擊確定后，再打開(kāi)彈框，如何讓之前選中的值回顯到頁(yè)面上。
給遍歷的元素 雙向綁定
v-model="businessregion.checked"
<template v-if="businessregionList.length > 0">
<template v-for="businessregion in businessregionList">
<dd>
<input type="checkbox" name="businessregion" class="businessregion" :data-id="businessregion.businessregionCode" v-model="businessregion.checked"/>
<label for="city4">{{businessregion.businessregionName}}</label>
</dd>
</template>
</template>就很容易實(shí)現(xiàn)多選框回顯了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
<script setup>是在單文件組件中使用Composition API的編譯時(shí)語(yǔ)法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語(yǔ)法糖使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
element-ui el-select下拉框el-date-picker彈出框定位問(wèn)題解決方案(推薦)
項(xiàng)目開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)el-select和el-date-picker彈出框顯示時(shí)候,滾動(dòng)屏幕,導(dǎo)致彈出框定位出現(xiàn)問(wèn)題,這篇文章主要介紹了element-ui el-select下拉框el-date-picker彈出框定位問(wèn)題解決方案(推薦),需要的朋友可以參考下2024-07-07
vue項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了Vue-cli3簡(jiǎn)單使用(圖文步驟)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Elementui如何限制el-input框輸入小數(shù)點(diǎn)
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了uni-app 的模板語(yǔ)法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue中兩種路由模式的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-08-08
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開(kāi)發(fā)中,字體文件通常是頁(yè)面加載時(shí)間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶(hù)體驗(yàn)可能會(huì)受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁(yè)面性能,需要的朋友可以參考下2024-09-09
vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼
本文主要介紹了vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼,可以實(shí)現(xiàn)與Modbus設(shè)備的數(shù)據(jù)交互,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02