如何从 VueJs 中的选定元素中删除特定的类名？

Posted 2023-02-23

【中文标题】如何从 VueJs 中的选定元素中删除特定的类名？

【英文标题】：How to remove particular class name from an selected element in VueJs?

【发布时间】：2018-11-09 00:33:58

【问题描述】：

这就是我的 vuejs 方法的样子。在 changeRoute 函数中，我可以通过e.target.className = 'clicked'; 更改类名但是当我尝试从其他元素中删除该类名时，我无法通过pre.removeClass('clicked'); 来完成此操作？

<script>   
export default 

  components:  
      
  ,
  data()  
      return 

      
  ,
  methods: 
      changeRoute(e, route) 
           
        var pre = this.$el.querySelector('.clicked');
        if(pre) 
            // pre.removeClass('clicked'); 
        

        this.$router.push(
            name: route
        ); 
        e.target.className = 'clicked';
          
      
  ,
  mounted() 
      this.$nextTick(() => 
 
      )
  


</script>

还有如何推送类名而不是全部替换为e.target.className = 'clicked';

【参考方案1】：

您可以为此使用classList.add and classList.remove。 但是您似乎想根据当前路由设置链接样式，这可以使用 vue-router 完成，因为它会在与当前路由匹配的链接上添加类。Vue-router active class

【讨论】：

非常感谢。实际上我想知道在函数中这样做的方式。 :)

很高兴我能帮助@SwadhIn

【参考方案2】：

使用实际的 Vue 来完成这个任务。 我可以在这里解释一下，但是 Vue 页面做得很好。

https://vuejs.org/v2/guide/class-and-style.html

【讨论】：

我知道这种技术，但我想知道如何在 vue 函数中做到这一点。

【参考方案3】：

如果所选元素是 li 列表的一部分并且应该添加类（并因此从先前单击的 li 中删除），这是 Herteby 在VueJS Forum 上的一个很好的解决方案

https://forum.vuejs.org/t/how-to-add-active-class-to-element/28108/2