Vue_选项卡

1. 效果

image.png

2. 代码

2.1 javaScript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:".tab",
        data:{
            btnText:["html","css","javascript"],
            context:["html是超文本标记语言","css是层叠样式表","javascript一种直译式脚本语言，弱类型"],
            idx:0,//先默认为第一个显示
            red:"red",
            skyblue:"skyblue",
            pink:"pink"
        },
        methods:{
            selTab(index){
                this.idx = index;
            }
        }
    })
</script>

2.2 html

<div class="tab" v-cloak>
    <div class="btn">
        <button :class="{active:index==idx}" v-for="(val,index) in btnText" v-on:click="selTab(index)">{{val}}</button>
    </div>
    <div class="content" :class="idx==0?red:idx==1?skyblue:pink">
        {{context[idx]}}
    </div>
</div>

2.3 css

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .tab{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        box-sizing: border-box;
        margin: 20px auto;
    }
    .tab button{
        width: 33.333%;
        float: left;
        height: 35px;
    }
    .tab button:nth-of-type(3)::after{
        content: "";
        clear: both;
    }
    .content{
        margin-top: 50px;
        text-indent: 2em;
        padding: 5px;
    }
    [v-cloak]{
        display: none;
    }
    .active{
        color:#fff;
        background: #666666;
    }
    .red{
        color:red;
    }
    .skyblue{
        color: skyblue;
    }
    .pink{
        color: pink;
    }
</style>