vue项目如何做切换按钮，在网页同一区域显示不同的内容

点击按钮你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高

jingjinglove-

15803人浏览 · 2020-05-19 19:06:49

jingjinglove- · 2020-05-19 19:06:49 发布

效果如下

功能：点击人气榜对应人气榜的排行，点击新品榜显示新品榜的内容
在这里插入图片描述

方法

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; //重要处
          },
    },