sport_pc/.svn/pristine/c1/c14f64fcdfbac1b2674d56e3f965ee2a2628c007.svn-base

<template>
    <div class="box">
        <div id="NavSlide">
            <nav>
                <p v-for="(item,$index) in arr" @click="toggle($index,item.id)">
                    <span :class="{active:$index==active}">{{item.title}}</span>
                </p>
            </nav>
        </div>
    </div>
</template>
<script>
	export default {
		data:function(){
			return {
				active:0,
                arr:[
                    {id:1001,title:"今日赛事"},
                    {id:1002,title:'所有赛事'},
                    {id:1003,title:'19/03/12'},
                    {id:1004,title:'19/03/14'},
                    {id:1005,title:'19/03/15'},
                    {id:1006,title:'19/03/16'},
                    {id:1007,title:'19/03/17'},
                    {id:1008,title:'19/03/18'},
                ]

			}
		},
		methods:{
                toggle:function(index,id){
                    this.active=index;
                    console.log(index,id);
                }
            }
	}


</script>

<style scoped>
.box{
    padding: 0 0.32rem;
    background-color: #EBEBEB;
}
#NavSlide{
    width:100% ;
    overflow:hidden;
}
#NavSlide nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: middle;
    -ms-flex-align: middle;
    align-items: middle;
    overflow: auto;
 
}
#NavSlide p{
    text-align: center;
    font-size: 0.28rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding:0 0.1rem;
    margin:0 0.05rem;
    color: #B8B8B8;
    height: 0.88rem;
    line-height: 0.88rem;

}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active{
 	color:#363636;
}
</style>