vue 实现单选/多选效果

Posted 2023-03-09

参考技术A

转： https://blog.csdn.net/Number7421/article/details/81002729

不过我以前都写过这三种方法了，很pang额，怕之后忘记了，偷个懒拿别人的，以免以后忘记了

一、单选：

思路：当点击的索引值 == v-for循环的索引值时，给你那个li添加选中样式

html：

CSS样式如下：

js

最后的效果如图所示

二、多选

方法一和方法二的主要的区别在于数据中有没已有标注是选中状态还是未选中状态

CSS样式如下：

方法一：

思路：新增一个新的空数组arr（arr的里元素的索引值表示，表示该索引值对应的li已经处于被选中状态），如果arr数组没有点击的索引值，就添加到arr数组里，如果有就把这个索引，就把这个索引从数组中删除。

html：

js

方法二：

思路：这个就更加通俗易懂了，把点击的那个是否选中的标志取反就可以了

html：

js

效果如图所示