v-for产生的列表，如何实现active样式的切换？

<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>
<script type="text/javascript">
	export default{
		data () {
			return {
				desc:[{
					ctrlValue:"test1"
				},{
					ctrlValue:"test2"
				},{
					ctrlValue:"test3"
				},{
					ctrlValue:"test4"
				}],
				currentIndex:0
			}
		}
	}
</script>
<style type="text/css" lang="less">
.toggleClassWrap{
	.clicked{
		color:red;
	}
}
</style>