vue实现点击不同按钮展示不同内容

效果是：在同一个页面，点击不同按钮，展示不同内容（内容也是在同意页面）方法是：借助v-show渲染不同的class属性步骤：1.先写两个按钮<div class="right1"><button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}">地图</button><

等一杯清茶

10230人浏览 · 2021-12-13 13:52:37

等一杯清茶 · 2021-12-13 13:52:37 发布

效果是：在同一个页面，点击不同按钮，展示不同内容（内容也是在同意页面）

方法是：借助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; //重要处
          },
    },