vue写tab选项卡

<style>
        .tab{
            width: 80px;
            height: 30px;
            background-color: yellowgreen;
            border: 1px solid #000;
            float: left;
        }
        .box{
            width: 244px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
 
<body>
    <div id="app">
        <div :class='tab' v-for='(item,index) in list' @click='sty(index)'>{{item.a}}</div>
        <div :class='box' v-for='(item,index) in list' v-show='item.show'>{{item.b}}</div>
    </div>
</body>
 
<script src="../../vue.js"></script> //本地引入vue
<script>
    new Vue({
        el:'#app',
        data:{
            tab:'tab',
            box:'box',
            box4:'box4',
            list:[
                {a:'标题1',b:'内容1',show:true},
                {a:'标题2',b:'内容2',show:false},
                {a:'标题3',b:'内容3',show:false}
            ]
        },
        methods:{
            sty(index){
                for(var i=0;i<this.list.length;i++){
                    this.list[i].show=false
                }
                this.list[index].show=true
 
            }
        }
    })
</script>
posted @ 2020-10-09 18:58  云中闪电  阅读(258)  评论(0)    收藏  举报