vue侧滑菜单

  1 <template>
  2   <div id="NavSlide">
  3     <nav>
  4       <p v-for="(item,index) in arr"
  5          @click="toggle(index)"
  6          :key="item.id">
  7         <!--<label :class="{active:index===active}">{{item.name}}</label>-->
  8         <router-link to="#" :class="{active:index===active}">{{item.name}}</router-link>
  9       </p>
 10     </nav>
 11   </div>
 12 </template>
 13 
 14 <script>
 15 export default {
 16   data () {
 17     return {
 18       active: 1,
 19       arr: [
 20         {
 21           id: 9001,
 22           name: '热门'
 23         },
 24         {
 25           id: 9002,
 26           name: '热门'
 27         },
 28         {
 29           id: 9003,
 30           name: '热门'
 31         }, {
 32           id: 9004,
 33           name: '热门'
 34         }, {
 35           id: 9005,
 36           name: '热门'
 37         }, {
 38           id: 9006,
 39           name: '热门'
 40         }, {
 41           id: 9007,
 42           name: '热门'
 43         }, {
 44           id: 9008,
 45           name: '热门'
 46         }, {
 47           id: 9009,
 48           name: '热门'
 49         }
 50       ]
 51     }
 52   },
 53   methods: {
 54     toggle: function (index) {
 55       this.active = index
 56     }
 57   }
 58 }
 59 </script>
 60 
 61 <style lang="stylus" scoped>
 62   #NavSlide {
 63     width: 100%;
 64     overflow: hidden;
 65   }
 66 
 67   #NavSlide nav {
 68     padding: 0 10px;
 69     display: -webkit-box;
 70     display: -ms-flexbox;
 71     display: flex;
 72     -webkit-box-align: middle;
 73     -ms-flex-align: middle;
 74     align-items: middle;
 75     overflow: auto;
 76     background-color: #31C17B;
 77   }
 78 
 79   #NavSlide p {
 80     text-align: center;
 81     font-size: 16px;
 82     -ms-flex-negative: 0;
 83     flex-shrink: 0;
 84     padding: 10px;
 85     margin: 5px;
 86     color: #E5E5E5;
 87 
 88   }
 89 
 90   #NavSlide p a {
 91     color: #E5E5E5;
 92     text-decoration: none;
 93   }
 94 
 95   #NavSlide p a.active {
 96     color: white;
 97   }
 98 
 99   #NavSlide .fixadd {
100     position: absolute;
101     right: -4px;
102     background-color: #31C17B;
103   }
104 
105 </style>