vue.js-动态绑定class 利用index实现导航

 <template>
     <div class="stock">
         <div class="buin_leftcont nav_ctrl">
             <ul class="buin_leftnav">
                 <template  v-for="(item, index) in menu_list">
                     <router-link :to="item.urls">
                         <li @click="show_ctrl(index)" :class="{'active':index===isActive}">
                             <span>{{item.name}}</span>
                         </li>
                     </router-link>
                 </template>
             </ul>
         </div>
         <div class='stock_router'>
             <router-view></router-view>
         </div>
     </div>
 </template>

 <script>
     import  $ from 'jquery'
     export default {
         name: 'stock',
         data () {
             return {
                 isActive:'',
                 menu_list:[
                     {name:'阀门管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'工具管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'执行器管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'研磨设备管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'加工设备管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'检测设备管理',urls:'/Stock/Fm_manage', show: false},
                     {name:'人才信息管理',urls:'/Stock/Fm_manage', show: false},
                 ]
             }
         },
         mounted(){
         },
         methods:{
             show_ctrl(index){
                 this.isActive=index;
             }
         }
     }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .stock{
         display: flex;
     }
     .buin_leftnav{
         display: flex;
         flex-direction:column;
         width: 246px;
         margin-top: 10px;
         margin-left: 10px;
     }
     .stock_router{
         width: 90%;
         flex-grow:2
     }
     .nav_ctrl ul{
         background:#1999D7;
         width:200px;
     }

     .nav_ctrl li{
         height:30px;
         line-height:30px;
         vertical-align:middle;
         padding:10px 10px;
         color:#FFF;
         font-family:"微软雅黑","幼圆",Arial, sans-serif;
         font-size:20px;
         font-weight:500;
         text-align:center;
         cursor:pointer;
         -webkit-transition: all 0.4s ease-in-out;
         -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
     }

     .nav_ctrl li:hover{
         background:#FF9000;
         -webkit-transform:scale(1.1);
         -moz-transform:scale(1.1);
         -o-transform:scale(1.1);
     }
     .active{
         background:#FF9000;
         /*-webkit-transform:scale(1.1);*/
         /*-moz-transform:scale(1.1);*/
         /*-o-transform:scale(1.1);*/
     }
 </style>

关键部分的截图