【Vue】vue实现列表点击选中（可多选）的思路

• Z时代
• 2024-01-10
• 分类：技术分享

如图，需要实现的效果是点击<li>是的左边的选择图标进行切换，列表可以多选，刚接触vue，不知道用vue的解决思路是怎么样的，求大佬指点。

回答

刚刚做过和你这个差不多的。。。

未选择的按钮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";//切换按钮样式
                           //写逻辑
                        }
                 },

数组每一项加个checked属性记录一下就行了，点击时候把index传过去修改数据

以上是 【Vue】vue实现列表点击选中（可多选）的思路 的全部内容， 来源链接： utcz.com/a/75243.html