v-for 产生的列表，实现 active 的切换

HTML

<template>
    <div class="toggleClassWrap">
     <ul>
        <li @click="currentIndex = index" 
            v-bind:class="{clicked: index === currentIndex}" 
            v-for="(item, index) in desc" 
            :key="index">
            <a href="javascript:;">{{item.ctrlValue}}</a>
        </li>
    </ul>
    </div>
</template>

JS

<script type="text/javascript">
    export default{
        data () {
            return {
                desc:[
                    {
                        ctrlValue:"test1"
                    },
                    {
                        ctrlValue:"test2"
                    },
                    {
                        ctrlValue:"test3"
                    },
                    {
                        ctrlValue:"test4"
                    }
                ],
                currentIndex:0
            }
        }
    }
</script>

CSS

<style type="text/css" lang="less">
    .toggleClassWrap{
        .clicked{
            color:red;
        }
    }
</style>