vue項(xiàng)目中使用多選框的實(shí)例代碼

<section class="group-con-search newInp" style="margin:10px;">
<el-input v-model="searchCon" placeholder="請輸入搜索內(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)
這篇文章主要介紹了vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的方法匯總
這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開瀏覽器的多種實(shí)現(xiàn)方法,方法一比較適用于vue3,每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-02-02
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來通過本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03
使用Vite構(gòu)建Vue3項(xiàng)目的流程步驟
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個(gè)備受喜愛的框架,而 Vite 作為一個(gè)新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個(gè) Vue 3 項(xiàng)目,從創(chuàng)建項(xiàng)目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07

