vue实现元素多选高亮显示

HTML：

<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>

JS：

<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>

CSS：

 .container{
    width: 100%;
    background: #FFFFFF;
    font-family: PingFang-SC-Regular;
  }
  .tab-list{
    width: 92.5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }

  .tab-li {
    min-width: 1.6rem;
    height: 0.67rem;
    border-radius: 0.27rem;
    text-align: center;
    line-height: 0.67rem;
    font-size: 0.32rem;
    color: #333333;
    margin-top: 0.2rem;
    margin-right: 0.26rem;
    padding: 0 0.2rem;
    color: #333333;
    background:#cccccc;
  }
  /*点击后样式*/
  .Active{
    color: #ffffff;
    background:#FF7E22;
  }

如果觉得对你有帮助尽管拿去用好了。我也是前端小白一个，抽空也会整理一些前端常用的小功能，以便自己以后需要时方便查找参考。