Vue2.0 でラジオ選択を相互に排他的にする方法

今回は、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中国語ウェブサイトの他の関連記事！

推奨読書:

vueでの共通コンポーネントの使用方法の詳細な説明

renderを操作するメソッドとは何ですか

以上がVue2.0 でラジオ選択を相互に排他的にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。