실제 프로젝트에서 Vue2.0 라디오 선택을 상호 배타적으로 만드는 방법

이번에는 실제 프로젝트에서 Vue2.0 단일 선택 상호 제외를 만드는 방법과 Vue2.0 단일 선택 상호 제외를 만들 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. .

위와 같이 기능을 구현해야 합니다

1. 페이지를 처음 로드할 때 데이터의 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 중국어 웹사이트의 기사!

추천 자료:

각진 인쇄 페이지에 지정된 함수

json-server가 백엔드 데이터를 만드는 방법

위 내용은 실제 프로젝트에서 Vue2.0 라디오 선택을 상호 배타적으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!