鍍金池/ 問答/HTML/ vue實現(xiàn)列表點擊選中（可多選）的思路

vue實現(xiàn)列表點擊選中（可多選）的思路

如圖，需要實現(xiàn)的效果是點擊<li>是的左邊的選擇圖標進行切換，列表可以多選，剛接觸vue，不知道用vue的解決思路是怎么樣的，求大佬指點。
clipboard.png

回答
編輯回答
陪妳哭

剛剛做過和你這個差不多的。。。

未選擇的按鈕class為detail-btn，選擇后class為detail-btn detail-selected
html:

<div class="detail-btn" @click="chooseOrder($event)"></div>

css:

.detail-btn{
    width: .43rem;
    height: .45rem;
    background: url(../images/list-no.png) no-repeat;
    background-size: 98%;
}
.detail-selected{
    background: url(../images/list-select.png) no-repeat;
    background-size: 98%;
}

js:

                chooseOrder:function(e){
                        if (e.target.className.indexOf("detail-selected") == -1) {
                            e.target.className = "detail-btn detail-selected"; //切換按鈕樣式
                           //寫邏輯
                        } else {
                            e.target.className = "detail-btn";//切換按鈕樣式
                           //寫邏輯
                        }
                 },
2017年1月21日 07:57
編輯回答
孤島

數(shù)組每一項加個checked屬性記錄一下就行了，點擊時候把index傳過去修改數(shù)據(jù)

2018年8月12日 00:05