実際のプロジェクトで 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 中国語 Web サイトに記事が掲載されました。

推奨読書:

角度印刷ページの指定された関数

json-server がバックエンドデータを作成する方法

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