参考https://blog.csdn.net/qq_38543537/article/details/79142578。

@click="currentIndex = index"//点击时获取当前的索引值。
v-bind:class="{active: index === currentIndex}"//绑定点击后的样式为active类，且当前索引值等于几就是在第几个添加active类。
data中设置currentIndex: 0，默认给第一个绑定active类。

html

    <div class="topNav">
        <div class="itemNav" v-for="(nav,index) in navs" @click="currentIndex = index" v-bind:class="{active: index === currentIndex}">
            <p>{{ nav.mas }}</p>
        </div>
    </div>

srcipt

data() {
  return {
        currentIndex: 0,
          navs: [
              {
                  mas: "智能点读"
              },
              {
                  mas: "智能问答"
              },
              {
                  mas: "词典"
              },
              {
                  mas: "概括大意"
              },
              {
                  mas: "遣词造句"
              },
          ],
  };
},

css

.itemNav {
    width: 24%;
    height: px2rem(65);
    line-height: 0.05;
    border: 1px solid rgb(0,153,255);
    border-radius: 2%; 
    float: left;
    font-size: px2rem(32);
    color: rgb(0,153,255);
    text-align: center;
}
.active {
    background-color: rgb(0,153,255);
    color: rgb(2555,255,255);
}

实现效果

切换active.gif