vue实现tab页

<!DOCTYPE html>
<html>
<head>
    <title>tab</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src='js/vue.js'></script>
    <script type="text/javascript" src='js/index.js'></script>
</head>
<!-- 
思想:
其实tab切换分两大块,上面的哪一行是一个ul,里面有四个li,下面的内容是四个div只不过只显示一个,其内容对应上面的li
现在要做的就是点击li时显示对应的div。所以当我们点击li时可以获取其index值,然后显示对应index的div。 -->

<body>
    <div id="my">
        <div class="myTab">
            <ul class="tab-tit">
                <!-- 遍历lists获取title的值以及index,点击时获取该index并将其传给num。 -->
                <li v-for="(v,i) in lists" @click="change(i)" :class="{'active':num==i}">
                    {{v.title}}
                </li>
            </ul>
            <div>
                <!-- 遍历lists获取content的值以及index,显示index==num的div,这个num对应的是title的index -->
                <div v-for="(v,i) in lists" v-show="num==i">
                      {{v.content}}
                </div>
            </div>
        </div>
    </div>

</body>

</html>
window.onload=function(){
    new Vue({
        el:'#my',//挂载元素
        data:{
            num:0,
            lists:[
                {title:'AAA',content:'aaa'},
                {title:'BBB',content:'bbb'},
                {title:'CCC',content:'ccc'},
                {title:'DDD',content:'ddd'}
            ]
        },
        methods:{//change方法,点击时将点击的title的index传给num,通过num来控制显示的cntent内容
            change:function(i){
                 this.num=i;
            }
        }

    });
}

 

阅读更多

没有更多推荐了,返回首页