vue 2.0 点击添加class，同时删除同级class

Posted 2020-11-05 shengnan_2017

<template>
  <div class="n-header">
    <ul class="title-wrapper">
      <li class="n-fliter">筛选:</li>
      <li v-for="(item,index) in titles" :key="item.id" class="n-title" @click="select(index)" :class="{\'active\': item.show?\'active\': \'\'}">
        <a href="#">
          <span v-show="item.show"></span>{{item.sort}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: [
        { sort: "全部", show: true },
        { sort: "前端开发", show: false },
        { sort: "后端开发", show: false },
        { sort: "移动端开发", show: false },
        { sort: "云计算/大数据", show: false },
        { sort: "测试/运维", show: false },
        { sort: "其他", show: false }
      ]
    };
  },
  methods: {
    select(index) {
      for (let i = 0; i < this.titles.length; i++) {
        this.titles[i].show = false;
      }
      this.titles[index].show = true;
    }
  }
};
</script>

<style scoped>
.n-header {
  display: inline-block;
  text-align: left;
  margin: 15px 0;
}
.title-wrapper {
  width: 1080px;
  height: 2.1rem;
}
.title-wrapper li {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.5rem;
  height: 1.5rem;
}
.title-wrapper li.active {
  background: rgb(6, 124, 89);
}
.title-wrapper li.active a {
  color: #fff;
}
.n-fliter {
  color: rgb(139, 138, 138);
}
.n-title {
  background: rgb(230, 227, 227);
  margin: 0 5px;
  padding: 0 10px;
  border-radius: 5px;
}
.n-title a {
  color: rgb(6, 124, 89);
  text-decoration: unset;
}
.n-title a:hover {
  color: #363636;
}
</style>

效果如下：