<body> <div id="app"> <nav> <p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}">{{item}}</p> </nav> </div> <!-- Add your site or application content here --> <script> var app=new Vue({ el:'#app', data:{ active:0, arr:[ "新闻", "视频", "社会", "军事", "军事1", "军事2", "军事3", "军事4", ] }, computed:{ }, methods:{ toggle(index){ this.active=index } }, }) </script>
css :
#app{ width: 100%; overflow:hidden; } #app nav{ padding: 0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: middle; -ms-flex-align: middle; align-items: middle; overflow: auto; } #app p{ text-align: center; font-size: 16px; -ms-flex-negative: 0; flex-shrink: 0; padding: 10px; margin: 5px; } #app p.active{ color: #ffff00; background-color: #000000; }