vue tabs编辑 初学者教学帖

简单的tabs 切换（小白教学贴）

一段简单的tabs切换能帮助你很快熟悉vue的一些基本的标签与使用，本代码在vue中用简单的vue指令设计一个tabs 切换显示不同的界面 可以配合移动端使用路由。

图片:

代码如下

// An highlighted block
<template>

<!--样式可以自己定义编写  本例子用了框架样式-->
    
    <div class="">
    <div class=" uni-flex uni-row  tabssert   ">
        <!--@click 点击事件可以在点击时候加载函数-->
        <div @click="changeTabs(arte=0)" class="flex-item uni-bg-green tabsert " hover-class="csss"><label>基本信息</label></div>
        <div @click="changeTabs(arte=1)" class="flex-item uni-bg-green tabsert " hover-class="csss"><label>设备管理 </label></div>
        <div @click="changeTabs(arte=2)" class="flex-item uni-bg-green tabsert " hover-class="csss"><label>部署信息</label></div>

    </div>


        <div class="uni-flex uni-column cesiwin">
            <!--cerat 是用于第一次加载判断 用于默认显示页面  cesier 是用于判断切换哪个 tab 可以绑定变量作为动态显示  v-show 指令是用于是否显示
              该页面的标签 = true 是显示  这段话的意思是  若变量cesier等于1或者 ceart是true 时显示该页面  -->
            <div class="flex-item flex-item-V uni-bg-red aeter" v-show='cesier==1||ceart=="true"'>A</div>
            <div class="flex-item flex-item-V uni-bg-green aeter" v-show='cesier==2'>B</div>
            <div class="flex-item flex-item-V uni-bg-blue aeter" v-show='cesier==3'>C</div>



        </div>





    </div>


</template>

<script>
    export default {
        name: "sss",
         data(){
            return{
                arte:"" ,
                cesier:"",
                ceart:true,
         }
         },
        /*生命周期函数设置点击事件函数*/
        methods: {
            changeTabs(arte) {
                this.ceart=false;
                 if(arte=="0"){
                      this.cesier=1;
                 }
                 else if (arte=="1"){
                     this.cesier=2;
                 }

                else if (arte=="2"){
                     this.cesier=3;
                }


            }


        }
    }

</script>

<style scoped>

    .game-board>.box{
        justify-self:center;
        align-self: center;
 /*       border:1px solid gray;*/



    }
    .game-board> .box{

    }
    .aeter{
        width: 100%;
        height: 600px;

     }
   .tabsert{
       width: 33.333%;
       height: 80upx;
       line-height: 80upx;
       background-color: rgb(144, 147, 153);
       color:rgb(255,255,255);
       border-right: 2upx  rgb(255, 255,255)  solid ;
   }

</style>

如果有更好的写法 ，欢迎大家在评论区贴出来。