<section style='margin:10px;'> <el-input v-model='searchCon' placeholder='請輸入搜索內容' @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: '', // 搜索內容}} currentSelect() { // checkbox 綁定的是checkedNames數組，選中或取消都存在里面 // 把值賦給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;}

總結

到此這篇關于vue項目中使用多選框的實例代碼的文章就介紹到這了,更多相關vue 使用多選框內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！