vue項(xiàng)目中使用多選框的實(shí)例代碼
<section class="group-con-search newInp" style="margin:10px;"> <el-input v-model="searchCon" placeholder="請(qǐng)輸入搜索內(nèi)容" @keyup.13.native="labelSearch"> <i class="el-icon-search" slot="suffix" @click="labelSearch"></i> </el-input> </section> <div class="tmplmsg_keywords_list"> <div class="checkbox" v-for="(item, index) in returnDate" :key="index"> <input type="checkbox" :id="index" @change="currentSelect" :value="item" v-model="checkedNames" > <label :for="index" class="label">{{item.keyword_name}}</label> </div> </div> <div class="pitchon"> <div class="name"> <span>已選擇(1/5)</span> </div> <div> <div class="checkbox list" v-for="(item, index) in returnDateArr" :key="index"> <input type="checkbox" :id="index" @change="currentSelect" :value="item" v-model="checkedNames" > <label :for="index" class="label">{{item.keyword_name}}</label> </div> data(){ return { returnDate:[], checkedNames: [], returnDateArr: [], searchCon: "", // 搜索內(nèi)容 } } currentSelect() { // checkbox 綁定的是checkedNames數(shù)組,選中或取消都存在里面 // 把值賦給returnDateArr this.returnDateArr = this.checkedNames; console.log(this.value) } .tmplmsg_keywords_list { height: 150px; overflow-y: scroll; padding-left: 10px; } .checkbox { display: block; height: 40px; line-height: 40px; padding-left: 12px; margin-right: 0; } input[type="checkbox"] { width: 14px; height: 14px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; position: relative; } input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; width: 100%; height: 100%; border: 1px solid #d9d9d9; } input[type="checkbox"]:checked::before { content: "\2713"; color: #fff; border: 1px solid #3190e8; background-color: #3190e8; position: absolute; top: 0; left: 0; width: 100%; font-size: 18px; } .label { vertical-align: sub; margin-left: 10px; }
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中使用多選框的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue 使用多選框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目頁(yè)面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)
這篇文章主要介紹了vue項(xiàng)目頁(yè)面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的方法匯總
這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的多種實(shí)現(xiàn)方法,方法一比較適用于vue3,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-02-02vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來(lái)通過(guò)本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03使用Vite構(gòu)建Vue3項(xiàng)目的流程步驟
在現(xiàn)代前端開(kāi)發(fā)的世界中,Vue 3 已然成為了一個(gè)備受喜愛(ài)的框架,而 Vite 作為一個(gè)新興的構(gòu)建工具,以其極高的效率和簡(jiǎn)捷的配置方式席卷了開(kāi)發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個(gè) Vue 3 項(xiàng)目,從創(chuàng)建項(xiàng)目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07