Vue实现一个按钮切换显示不同的div内容
<template><button type="primary" @click="click" icon="retweet" style="margin-left: 8px">{{message}}</button><div v-show="isShowChart">图表内容</div><div v-show="isShowTabl
·
<template>
<button type="primary" @click="click" icon="retweet" style="margin-left: 8px">{{message}}</button>
<div v-show="isShowChart">图表内容</div>
<div v-show="isShowTable">表格内容</div>
</template>
export default {
name: "DrivingStatistics",
data() {
return {
isShowChart: true,
isShowTable: false,
message: "切换表格",
}
}
methods: {
//切换按钮
click() {
if (this.isShowChart) {
this.message = "切换图表";
} else {
this.message = "切换表格";
}
this.isShowChart = !this.isShowChart;
this.isShowTable = !this.isShowTable;
}
}
}
效果:默认显示图表
效果:切换显示表格
更多推荐
已为社区贡献1条内容
所有评论(0)