vue之动态添加class(active)的方法大全

过来人常说“要想学vue，必先忘记js”，这是因为vue控制dom节点的思维方式和js不大相同。vue项目中如何点击元素动态添加active-class？今天来分享多种解决方式。

一. v-for循环情况下动态添加：
1.v-for循环元素，绑定key
2.在data中创建标识isActive=0，这是为了初始化第一个标题为active
3.监听单击事件触发方法，传入点击元素的index改变标识
4.绑定class属性，判断当(index===标识)时添加active-class

<ul>
  <li v-for="(item,index) of list" :key="index" 
  :class="{active: isActive === index}"
  @click="changeClass(index)">{{item}}</li>
</ul>

data() {
  return {
    list: ["标题一","标题二","标题三"],
    isActive: 0
  }
},
methods: {
  changeClass(i) {
    this.isActive = i;
  }
}

.active {
  color: red;
}

二.非循环情况下动态添加：
跟方法一循环情况同理，只不过将循环的动态index更改为固定的编号，将class的判断条件更改为(isActive === 编号)。同样的，在点击事件触发时传入编号更改标识。

<ul>
  <li :class="{active: isActive === 1}" @click="changeClass(1)">标题一</li>
  <li :class="{active: isActive === 2}" @click="changeClass(2)">标题二</li>
  <li :class="{active: isActive === 3}" @click="changeClass(3)">标题三</li>
</ul>

data() {
  return {
    isActive: 1
  }
},
methods: {
  changeClass(i) {
    this.isActive = i;
  }
}

.active {
  color: red;
}

三.利用router的linkActiveClass属性：
router配置中有linkActiveClass这样一个属性，用于规定当某一路由被选中或页面处在某路由时，添加了该路由的<routerLink>元素将自动添加指定class。
假如现在有这样两个路由信息：

{
  path: "/",
  name: "Home",
  component: Home
},
{
  path: "/title",
  name: "titleone",
  component: titleone
}

页面是两个选项标题并赋予相应的路由路径：

<routerLink to="/">首页 </routerLink>|
<routerLink to="/title">介绍</routerLink>

.active {
  color: red;
}

万事俱备只欠东风，"router/index.js"中设置linkActiveClass属性：

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: "active"  //希望元素动态添加的class名 “active”
});

按道理是没问题的了，点击任意路由文本都将动态添加上active。但是会发现，无论点击哪一个标题，被赋予"/“路由的标题永远都会高亮active，为什么？

要解决这个问题要先了解一个概念：“模糊匹配”和“精准匹配”。linkActiveClass属性是模糊匹配模式，即选中的路由路径中所包含的所有其他路由都将视为选中，比如例子中我选定了“/title”路由，路径中包含了”/"，所以“首页”标题也会自动添加上active。如果需要避开这种情况的话，就得使用linkExactActiveClass属性代替linkActiveClass了，它是精准匹配模式，只会为选中的路由添加active。

linkExactActiveClass: "active"

四.无包含重复路径情况下：
上面讲的是典型的"/"根路径情况，也就是A路由路径包含B路由路径时，可以通过linkExactActiveClass和linkActiveClass自由控制动态添加active的各种需求。
那如果所有路由路径各不相同，没有包含之说，都是纯粹的“兄弟路由”，这时我希望某些文本同时获得active，怎么办？linkExactActiveClass和linkActiveClass都无法解决这问题，所以不要它了，我们可以为路由添加元信息属性来解决。

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home
  },
  {
    path: "/title",
    name: "titleone",
    component: titleone,
    meta: {   //添加元信息，判断active===某路径就获得active
      requiresAuth: true, 
      active: "/home"
    }
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

<routerLink to="/home" :class="{'active': $route.meta.active === '/home'}">首页 </routerLink>|
<routerLink to="/title" :class="{'active': $route.meta.active === '/home'}">介绍</routerLink>

为"/title"路由添加元信息，然后在文本元素上绑定class属性进行判断：当切换为"/title"路由时，$route.meta.active="/home"的元素都获得active。