这次给大家带来在实战项目中怎么样做出vue2.0单选互斥，做出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>
自我理解
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular打印页面指定功能
json-server怎样做出后端数据
以上就是在实战项目中怎么样做出vue2.0单选互斥的详细内容。