vue移动端导航栏滑块字体点击变色_vue按钮点击后文字及背景都更改了颜色,如果触发滑动条按钮自动回归原来的颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/document_write/article/details/96582735

本文介绍如何在Vue移动端项目中实现导航栏滑块效果，并详细讲解当用户点击导航栏字体时如何改变颜色，提升用户体验。通过结合CSS样式和Vue组件交互，创建动态导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="NAV">
      <div id="NavSlide">
        <div class="nav">
          <p v-for="(item,index) in List" :key="index" :class="num==index?'changeColor':''"  @click="gotoGood(index)" >{{item}}</p>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        List: ["爆款", "0.99菜场", "马小夜宵", "下午茶","便利生活","会员特价","蔬菜","水果","肉蛋","熟食","水产","乳品","酒饮","零食","轻食","速食","粮油","清洁","个护","家居","现磨咖啡","次日达"],
        num:''
      };
    },

    methods:{
      gotoGood(index){
        this.num=index;
      }
    }
  };
</script>

<style scoped>
  .changeColor{
    color:deeppink;
    padding-bottom:10px;
    border-bottom: 2px solid deeppink;
    text-align: center;
  }
  #NavSlide{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow:hidden;
    border-bottom: 1px solid #cccccc;
  }
  ::-webkit-scrollbar{
    width:0;
    height:0;
    color: transparent;
  }
  .nav{
    width:85%;
    margin:2px 10px;
    display: flex;
    overflow:auto;
  }
  .nav>p{
    flex-shrink: 0;
    padding:11px 0px;
    font-size: 14px;
    margin:0px 12px;
  }
</style>