vue实现点击不同按钮展示不同内容
效果是：在同一个页面，点击不同按钮，展示不同内容（内容也是在同一页面） 方法是：借助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>
1
2
3
4
2
3
4
# 2.css
.newStyle{
border-bottom: 2px solid #f0892e;
color: #f0892e;
font-size: 29px;
font-weight: bold;
}
1
2
3
4
5
6
2
3
4
5
6
# 3.切换显示的内容
<div class="right3">
<div v-show='0===number'><p>我是地图</p></div>
<div v-show='1===number'><p>我是监控</p></div>
</div>
1
2
3
4
2
3
4
# 4.vue双向绑定
data() {
return {
number: 0,
}
},
methods: {
change: function (index) {
this.number = index; //重要处
},
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2024/02/03, 13:17:04
|