Vue.js中如何移除选中元素指定类名及追加类名？

嘿，我来帮你搞定这两个问题：

1. 为什么无法移除其他元素的clicked类名？ #

你用的pre.removeClass('clicked')是jQuery的专属方法，但这里的pre是原生DOM元素，原生DOM并没有这个API。我们需要用原生DOM的classList接口来操作类名，把这行代码改成：

pre.classList.remove('clicked');

这样就能正确移除之前选中元素的clicked类了。

2. 如何追加类名而非替换所有类名？ #

e.target.className = 'clicked'会直接覆盖掉元素原有的所有类名，这显然不是你想要的效果。同样用classList.add()来追加类名，它只会在原有类的基础上添加新类，不会替换：

e.target.classList.add('clicked');

修改后的完整代码 #

<script>
 export default {
 components: {
 },
 data() {
 return {
 }
 },
 methods: {
 changeRoute(e, route) {
 var pre = this.$el.querySelector('.clicked');
 if(pre) {
 pre.classList.remove('clicked'); // 修复移除类名的问题
 }
 this.$router.push({ name: route });
 e.target.classList.add('clicked'); // 修复追加类名的问题
 }
 },
 mounted() {
 this.$nextTick(() => {
 })
 }
 }
</script>

另外给你个Vue风格的小建议：如果你的导航元素是用v-for渲染的，其实可以通过绑定响应式数据（比如currentActiveRoute）来控制类名，这样更符合Vue的响应式思想，不用手动操作DOM，示例如下：

<nav>
  <a 
    v-for="routeItem in routeList" 
    :key="routeItem.name"
    :class="{ clicked: currentActiveRoute === routeItem.name }"
    @click="changeRoute(routeItem.name)"
  >
    {{ routeItem.label }}
  </a>
</nav>

然后在methods里只需要更新currentActiveRoute和跳转路由，完全不用手动操作DOM类名，代码会更简洁易维护～

内容的提问来源于stack exchange，提问作者SwadhIn