data() {
return {
navTabr: [ // 服务项目
{
name: 'CNC加工'
},
{
name: '数控加工'
},
{
name: '橡塑制品'
},
{
name: '冲压加工'
},
{
name: '自动化设备'
},
{
name: '工装检具'
},
{
name: '模具加工'
},
{
name: '钣金加工'
}
],
selected: [],//选中的服务项目名称
}
}
<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方法定义
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)));
},