Question

这就是我的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';

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

3 个答案: