vue底部导航栏点击切换样式

你可以使用Vue的条件渲染和class绑定来实现底部导航栏的点击切换样式。

首先，在Vue组件中，定义一个data属性来表示当前选中的导航项：

data() {
  return {
    currentTab: 'home'
  }
}

然后，在模板中使用条件渲染和class绑定来根据当前选中的导航项添加不同的样式：

<template>
  <div>
    <router-link to="/" class="tab-item" :class="{active: currentTab === 'home'}">首页</router-link>
    <router-link to="/about" class="tab-item" :class="{active: currentTab === 'about'}">关于我们</router-link>
    <router-link to="/contact" class="tab-item" :class="{active: currentTab === 'contact'}">联系我们</router-link>
  </div>
</template>

这里通过:class绑定来给选中的导航项添加active类，然后在CSS中定义active类的样式即可。

最后，在每个导航项的点击事件中更新当前选中的导航项：

methods: {
  selectTab(tab) {
    this.currentTab = tab
  }
}

完整的代码示例：

<template>
  <div>
    <router-link to="/" class="tab-item" :class="{active: currentTab === 'home'}" @click="selectTab('home')">首页</router-link>
    <router-link to="/about" class="tab-item" :class="{active: currentTab === 'about'}" @click="selectTab('about')">关于我们</router-link>
    <router-link to="/contact" class="tab-item" :class="{active: currentTab === 'contact'}" @click="selectTab('contact')">联系我们</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab
    }
  }
}
</script>

<style>
.tab-item {
  /* 导航项的样式 */
}
.tab-item.active {
  /* 选中导航项的样式 */
}
</style>