效果是：在同一个页面，点击不同按钮，展示不同内容（内容也是在同一页面）
方法是：借助v-show渲染不同的class属性
步骤：

先写两个按钮

1
2
3
4
<div class="right1">
    <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>

css

1
2
3
4
5
6
.newStyle{
   border-bottom: 2px solid #f0892e;
   color: #f0892e;
   font-size: 29px;
   font-weight: bold;
 }

切换显示的内容

1
2
3
4
<div class="right3">
     <div v-show='0===number'><p>我是地图</p></div>
     <div v-show='1===number'><p>我是监控</p></div>
</div>

vue双向绑定

1
2
3
4
5
6
7
8
9
10
 data() {
  return {
    number: 0,
  }
},
 methods: {
      change: function (index) {
        this.number = index; //重要处
      },
},