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>

关键部分的截图