如何讓Vue2.0做出單選互斥

這次帶給大家如何讓Vue2.0做出單選互斥，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 ? &#39;active&#39;: &#39;&#39;" >
          {{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>

自我理解

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue常用元件使用詳解

作業render執行有哪些方法

以上是如何讓Vue2.0做出單選互斥的詳細內容。更多資訊請關注PHP中文網其他相關文章！