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

92 阅读 0 评论 61 点赞

我是靠谱客的博主瘦瘦飞机，最近开发中收集的这篇文章主要介绍vue 可选按钮_【Vue】vue实现列表点击选中（可多选）的思路，觉得挺不错的，现在分享给大家，希望可以做个参考。

如图，需要实现的效果是点击

是的左边的选择图标进行切换，列表可以多选，刚接触vue，不知道用vue的解决思路是怎么样的，求大佬指点。

回答

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

未选择的按钮class为detail-btn，选择后class为detail-btn detail-selected

html:

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传过去修改数据

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。