vue写tab栏

一、知识点

指令：尤雨溪自定义的HTML属性，以v-开头
① v-show 决定元素是否显示
② :class 动态添加类名 v-bind:class
③ @click 点击事件 v-on:click
④ v-if 决定元素是否上树

二、实现方法

tab栏

代码如下：

<template>
    <div class="box">
        <div class="hd">
            <span :class="{'cur': now === '语文'}" @click="now = '语文'">语文</span>
            <span :class="{'cur': now === '数学'}" @click="now = '数学'">数学</span>
            <span :class="{'cur': now === '英语'}" @click="now = '英语'">英语</span>
        </div>
        <div class="bd">
            <div v-show="now === '语文'">
                <ul>
                    <li v-for="i in 5" :key="i">白日依山尽</li>
                </ul>
            </div>
            <div v-show="now === '数学'">
                <ul>
                    <li v-for="i in 5" :key="i">三角函数</li>
                </ul>
            </div>
            <div v-show="now === '英语'"> 
                <ul>
                    <li v-for="i in 5" :key="i">Never postpone joy.</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                now: '语文'
            }
        },
    }
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 360px;
        margin: 50px auto;
    }
    .hd{
        width: 360px;
        height: 40px;
        background: #eee;
    }
    .hd span{
        width: 119px;
        height: 40px;
        border-right: 1px solid #ccc;
        display: block;
        float: left;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    .hd span.cur{
        background: orange;
        color: #fff;
    }
    .bd{
        width: 320px;
        height: 180px;
        background: #ccc;
        padding: 20px;
    }
    .bd ul{
        list-style: none;
    }
    .bd ul li{
        line-height: 200%;
    }

</style>

代码比较简单，就不分步讲解了。