<template>
<div class="container">
<ul class="tab-list">
<li class="tab-li"
:class="item.isSelected ?'Active' : '' "
v-for="(item,index) in list" @click="cutTabClick(index,item)"
:key="index"
>{{item.name}}</li>
</ul>
</div>
<template>
<script>
export default {
name: 'tab',
data () {
return {
//要实现多选高亮显示就给数组中每个对象添加唯一的属性 isSelected: false
list: [
{ name: '全部', isSelected: false },
{ name: '招商供应', isSelected: false },
{ name: '招聘求职', isSelected: false },
{ name: '出租求租', isSelected: false },
{ name: '二手设备', isSelected: false },
{ name: '采购求购', isSelected: false },
{ name: '王昭君', isSelected: false },
{ name: '帅亮亮', isSelected: false }
],
actiove: 0
}
},
methods: {
cutTabClick (index, item) {
this.actiove = index
//然后通过这个属性判断是否选中点亮和取消
item.isSelected = !item.isSelected
}
}
}
</script>