情境描述

假设页面上有一个菜单，点击选中给一个选中样式，你会怎么做呢？比如：

html:

<div class="demo-container">
    <ul class="demo-ul" id="menu">
      <li class="active"><a href="##">首页</a></li>
      <li><a href="##">笔记</a></li>
      <li><a href="##">消息</a></li>
    </ul>
</div>

scss:

.demo-ul{
  padding: 50px;
  background: #fff;
  height: 100px;
  overflow: hidden;
  li{
    position: relative;
    float: left;
    height: 30px;
    line-height: 30px;
    margin-right: 15px;
    font-size: 14px;
    a:hover{
      color: deepskyblue;
    }
  }
  li.active{
    a{
      color: deepskyblue;
    }
    &::after{
      content: '';
      width: 28px;
      height: 2px;
      background: deepskyblue;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }
  }
}

效果图：

jquery或者原生js思路

要想点击某一个时选中，其他取消选中，如果是jquery或者原生js，那么思路就是先移除所有的active，然后给当前DOM加上active，就是在点击事件中加入以下代码：

$("#menu li").removeClass('active');
$(this).addClass('active');

代码也非常简洁，缺点就是直接操作了DOM，如果整个页面都充斥着$()是不是class或者id都不好维护。

 

vue解决方法

vue给我们提供了类的绑定，详情见https://v3.vuejs.org/guide/class-and-style.html#binding-html-classes，这就很方便了。那么我们在li点击事件时传参数，代表li本身，定义一个变量，如果此变量与参数全等，我们就加上active这个类，具体代码如下：

html: 
<div class="demo-container">
    <ul class="demo-ul">
      <li @click="select(1)" :class="{active: liActiveClass == 1}"><a href="##">首页</a></li>
      <li @click="select(2)" :class="{active: liActiveClass == 2}"><a href="##">笔记</a></li>
      <li @click="select(3)" :class="{active: liActiveClass == 3}"><a href="##">消息</a></li>
    </ul>
</div>

js：
export default {
  data(){
    liActiveClass: 1 //默认选中‘首页’
  },
  methods:{
    select(i){
        this.liActiveCalss = i;
    }
  }
}

在绑定类时，如果动态类比较多，可以使用计算属性computed，后面慢慢学习时再讨论。