vue侧滑菜单

<template>
  <div id="NavSlide">
    <nav>
      <p v-for="(item,index) in arr"
         @click="toggle(index)"
         :key="item.id">
        <!--<label :class="{active:index===active}">{{item.name}}</label>-->
        <router-link to="#" :class="{active:index===active}">{{item.name}}</router-link>
      </p>
    </nav>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 1,
      arr: [
        {
          id: 9001,
          name: '热门'
        },
        {
          id: 9002,
          name: '热门'
        },
        {
          id: 9003,
          name: '热门'
        }, {
          id: 9004,
          name: '热门'
        }, {
          id: 9005,
          name: '热门'
        }, {
          id: 9006,
          name: '热门'
        }, {
          id: 9007,
          name: '热门'
        }, {
          id: 9008,
          name: '热门'
        }, {
          id: 9009,
          name: '热门'
        }
      ]
    }
  },
  methods: {
    toggle: function (index) {
      this.active = index
    }
  }
}
</script>

<style lang="stylus" scoped>
  #NavSlide {
    width: 100%;
    overflow: hidden;
  }

  #NavSlide 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;
    background-color: #31C17B;
  }

  #NavSlide p {
    text-align: center;
    font-size: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 10px;
    margin: 5px;
    color: #E5E5E5;

  }

  #NavSlide p a {
    color: #E5E5E5;
    text-decoration: none;
  }

  #NavSlide p a.active {
    color: white;
  }

  #NavSlide .fixadd {
    position: absolute;
    right: -4px;
    background-color: #31C17B;
  }

</style>