Vue2.0 实现互斥

需要实现如上图的功能

1. 首次加载页面，根据data里的catgoryId高亮对应的选项
2. 点击某个选项，该选项高亮，其他去掉高亮

代码结构：

<template> 
    <dd  @click="changeCategory(currCourseFirst.categoryId)" 
                v-for="currCourseFirst in currCourse.currCourseFirst" 
                :key="currCourseFirst.categoryId" 
                :class="resultCategoryId === currCourseFirst.categoryId ? 'active': ''" >
                    {{currCourseFirst.name}}
    </dd>
</template>

<script>
    export default{
        data() {
            return {
                categeryId: this.$route.query.categoryId,
                typeId: this.$route.query.typeId
            }
        },
        methods: {
            changeCategoryId(categoryId) {
                this.categoryId = categoryId
            }
        },
        computed: {
            resultCategoryId(){
                return this.categoryId
            }
        }
    }
</script>

自我理解

参考链接： http://cache.baiducontent.com...