vue實現(xiàn)自定義多選按鈕
更新時間：2020年07月16日 11:17:37 作者：面壁思過程
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)自定義多選按鈕的具體代碼，供大家參考，具體內(nèi)容如下
圖示
返回的選中列表是一個數(shù)組
html部分
<!-- 自定義多選 -->
<div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}</div>
js部分
//data
arr:[
{
val:1,
ischeck:false
},
{
val:2,
ischeck:false
},
{
val:3,
ischeck:false
},
{
val:4,
ischeck:false
},
{
val:5,
ischeck:false
},
{
val:6,
ischeck:false
}
],
selarr:[],
//methods
sel(index,item){
let arr=[...this.arr];
let selarr=[...this.selarr];
if(arr[index].ischeck==false){
arr[index].ischeck=true;
selarr.push(item)
}else{
arr[index].ischeck=false;
var index11=selarr.indexOf(index)
selarr.splice(index11,1)
}
this.arr=arr;
this.selarr=selarr;
},
樣式
.list{
width: 100%;
line-height: 30px;
}
.list.active{
background: pink;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了vue3?自定義圖片放大器效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07
vue element upload實現(xiàn)圖片本地預(yù)覽
這篇文章主要為大家詳細介紹了vue element upload實現(xiàn)圖片本地預(yù)覽，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
本文主要介紹了Vue?中v-model的完整用法及原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue.js選中動態(tài)綁定的radio的指定項,需要的朋友可以參考下2017-06-06
echarts 使用formatter 修改鼠標懸浮事件信息操作
這篇文章主要介紹了echarts 使用formatter 修改鼠標懸浮事件信息操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue計算屬性computed--getter和setter用法
這篇文章主要介紹了vue計算屬性computed--getter和setter用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue使用canvas繪制圓環(huán)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03