<section style='margin:10px;'> <el-input v-model='searchCon' placeholder='請輸入搜索內(nèi)容' @keyup.13.native='labelSearch'> <i slot='suffix' @click='labelSearch'></i> </el-input> </section> <div class='tmplmsg_keywords_list'> <div v-for='(item, index) in returnDate' :key='index'> <inputtype='checkbox': @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 v-for='(item, index) in returnDateArr' :key='index'><input type='checkbox' : @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項目中使用多選框的實例代碼的文章就介紹到這了,更多相關(guān)vue 使用多選框內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！