用vue写一个teb切换

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>tab切换</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style>
        *{
                margin: 0;padding: 0;
        }
        ul li{
                list-style: none;
        }
                #box{
                        width: 606px;
                        height: 354px;
                        border:1px solid black;
                        margin: 50px auto;
                }
                #head{
                        overflow: hidden;
                }
                #head h1{
                        width:200px;
                        height: 100px;
                        border:1px solid black;
                        font-size: 32px;
                        color: black;
                        float: left;
                        text-align: center;
                        line-height: 100px;
                }
                #con li{
                        width: 604px;
                        height: 250px;
                        border:1px solid black;
                        font-size: 45px;
                        text-align: center;
                        line-height: 250px;
                        color: black;
                        display: none;
                }
                #head .color{
                        background-color: green;
                        color: #fff;
                }
                #con .neirong{
                        display: block;
                }
        </style>
</head>
<body>
        <div id="box">
                <div id="head">
                        <h1 v-for="(h,index) in h1s" @click="Tab(index)" v-bind:class="{color:h.isfalse}">{{h.h1}}</h1>
                </div>
                <ul id="con">
                        <li v-for="(li,index) in lis" v-bind:class="{neirong:li.isfalse}">{{li.li}}</li>
                </ul>
        </div>
</body>
<script src="js/vue.js"></script>
<script>
        var vm=new Vue({
                el:"#box",
                data:{
                        h1s:[
                                {h1:"标题1",isfalse:true},
                                {h1:"标题2",isfalse:false},
                                {h1:"标题3",isfalse:false}
                        ],
                        lis:[
                                {li:"内容111",isfalse:true},
                                {li:"内容222",isfalse:false},
                                {li:"内容333",isfalse:false}
                        ]                },
                methods:{
                        Tab:function(index){
                                this.h1s.forEach(function(item){
                                        item.isfalse=false;
                                });
                                this.lis.forEach(function(item){
                                        item.isfalse=false;
                                })
                                this.h1s[index].isfalse=true;
                                this.lis[index].isfalse=true;
                        }
                }
        })

</script>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 用vue写一个teb切换

赞 (2)
分享到:更多 ()

发表评论 0