vue通过摁钮局部切换页面

版权声明：如果对您有所帮助，那就随手分享帮助更多人吧！ https://blog.csdn.net/weixin_43970743/article/details/89084451

今天怂怂就为大家分享一篇Vue.js通过点击摁钮局部切换页面的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随怂怂过来看看吧

代码描述：点击切换按钮，来改变显示的内容，切换不同的div页面。radioButton相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。 

<template>
 <!--<span> 累计发布服务：268个</span>-->
    <span style="height: 50px;width: 200px;margin-left: 650px">
        <el-radio-group v-model="radioButton" size="medium" >
            <el-radio-button :label="true" >累计</el-radio-button>
            <el-radio-button :label="false">今日</el-radio-button>
        </el-radio-group>
    </span>
    <div v-show="radioButton">
        <div><h1>这是累计-页面！！</h1></div>
    </div>
    <div v-show="!radioButton">
        <div><h1>这是今日-页面！！</h1></div>
    </div>
</template>

<script>
export default {
        name: 'datagovernIssu',
            data() {
            return {
                radioButton:true,
      }
</script>

 如图演示效果：

        这是点击今日所显示的局部页面：

         这是点击今日所显示的局部页面：