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

骑猪看日落 2023-07-18 15:30 10阅读 0赞

过来人常说“要想学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

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

.active { 
      color: red;
    }

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

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
    }

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

.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，为什么？  
![在这里插入图片描述][20200329173712642.png]  
要解决这个问题要先了解一个概念：“模糊匹配”和“精准匹配”。**`linkActiveClass`属性是模糊匹配模式**，即选中的路由路径中所包含的所有其他路由都将视为选中，比如例子中我选定了“/title”路由，路径中包含了”/"，所以“首页”标题也会自动添加上active。**如果需要避开这种情况的话，就得使用`linkExactActiveClass`属性代替linkActiveClass了，它是精准匹配模式，只会为选中的路由添加active。**

linkExactActiveClass: "active"

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

为"/title"路由添加元信息，然后在文本元素上绑定class属性进行判断：当切换为"/title"路由时，`$route.meta.active="/home"`的元素都获得active。  
![在这里插入图片描述][20200329192025955.png]

[20200329173712642.png]: /images/20230528/fc387c4f8bd7486492eccf7ba3561edc.png
[20200329174436739.png]: /images/20230528/23b6ce5006874baab6dcd003ee20ed89.png
[20200329192025955.png]: /images/20230528/9e3db9b7f1614722ab596cd7075207fd.png