效果如下

功能：点击人气榜对应人气榜的排行，点击新品榜显示新品榜的内容

方法

1、首先写2个button按钮，并给定class作为按钮样式，点击之后添加新的样式

class=“btn_anniu” div原有的class
:class="{ newStyle:0===number}" 点击之后给div绑定新的class

 <div class="btn_switch">
      <button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}">人气榜</button>
      <button class="btn_anniu" @click="change(1)" :class="{ newStyle:1===number}">新品榜</button>
 </div>

.btn_anniu{
    width: 50%;
    padding: 25px 0;
    font-size: 29px;
    font-weight: bold;
    border: 0 solid #fff;
    color: #000;
    outline: none;
    background: #fff;
  }
  .newStyle{
    border-bottom: 2px solid #f0892e;
    color: #f0892e;
    font-size: 29px;
    font-weight: bold;
  }

2、 写上我们想要它切换显示的内容

       <div>
          <div v-show="0===number"><p>我是人气榜</p></div>
          <div v-show="1===number"><p>我是新品榜</p></div>
        </div>

3、在data中加入number: 0,如下代码

4、在methods加入change，如下代码

 data() {
      return {
        number: 0,
      }
    },
     methods: {
          change: function (index) {
            this.number = index; //重要处
          },
    },

这样就完成啦