效果是:在同一个页面,点击不同按钮,展示不同内容(内容也是在同意页面)

方法是:借助v-show渲染不同的class属性

步骤:

1.先写两个按钮

<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>

2.js

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

3.切换显示的内容

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

4.vue双向绑定

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐