vue多选按钮的动态显示(动态修改class名)

1.问题描述:

      最近接手了公司的vue项目,改功能是要实现可以选中多个标签，这里没有用mint-ui的组件，是通过添加class实现的，截图如下(不会排版有点丑):

vue页面 这里可以看出按钮位置就是添加了一张图片来显示的

其中选中的图标是通过class实现的，怎么动态控制class属性就成了解决问题的重点

先看一下循环的标签:

所以通过控制dt的class属性来实现:

1.给dt标签添加事件 @click="addClass($event)"

传递的$event 为当前dom元素对象

2.让我们看一下 addOrdDeleteSum()里写了什么:

这样就能动态实现给dom元素添加class属性，来实现这种效果了。

后续:

后来后端开发坑了我，说接口太慢了，不支持批量，好简单的一句话，其实就是他不想改接口了，我都是按照原型来做的啊大哥，你一句不支持批量，知道我要改多少吗，好像很简单一样啊...咱也不寄到，咱也不敢问~~

改就改吧，后来想了一下，在原来的基础上，其实不难

解决思路：

选中一个dom的时候，将数组里的所有id的元素动态修改class，数组只保存当前选中的元素即可,下面来具体实现:

让我们来看看写了啥:

到此就解决了！重点是怎么传递当前dom元素，并对dom元素的值进行操作.

希望对遇到类似问题的朋友能够有所帮助,无奈本人技术不够精湛，代码不够优雅，请轻喷。。有人想到更好的解决方案可以一起相互交流~~