我是靠谱客的博主 仁爱外套,这篇文章主要介绍VUE点击div选中多个选项并改变其样式(类似多选),现在分享给大家,希望可以做个参考。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
data() { return { navTabr: [ // 服务项目 { name: 'CNC加工' }, { name: '数控加工' }, { name: '橡塑制品' }, { name: '冲压加工' }, { name: '自动化设备' }, { name: '工装检具' }, { name: '模具加工' }, { name: '钣金加工' } ], selected: [],//选中的服务项目名称 } }
复制代码
1
2
3
4
5
6
7
8
<div class="filter-nav" v-for="(item,index) in navTabr" :key="index" :class="{'active':selected.indexOf(item)!=-1}" @click="active(index,item)"> <div class="bg-box"> <span>{{item.name}}</span> </div> </div>

methods方法定义

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
active(index, item) { // this.selected.indexOf(item) 判断item下标是否为-1, // 是-1则数组中匹配不到该数据,添加 // 不是-1则说明匹配到了,抹除 if (this.selected.indexOf(item) !== -1) { this.selected.splice(this.selected.indexOf(item), 1); //取消 } else { this.selected.push(item);//选中添加到数组里 } console.log(JSON.parse(JSON.stringify(this.selected))); },

最后

以上就是仁爱外套最近收集整理的关于VUE点击div选中多个选项并改变其样式(类似多选)的全部内容,更多相关VUE点击div选中多个选项并改变其样式(类似多选)内容请搜索靠谱客的其他文章。

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

评论列表共有 0 条评论

立即
投稿
返回
顶部