Wie man in praktischen Projekten dafür sorgt, dass sich die Vue2.0-Radioauswahl gegenseitig ausschließt

Dieses Mal zeige ich Ihnen, wie Sie in einem praktischen Projekt den gegenseitigen Einzelauswahl-Ausschluss von Vue2.0 durchführen und welche Vorsichtsmaßnahmen für den gegenseitigen Einzelauswahl-Ausschluss von Vue2.0 gelten. Nehmen wir das Folgende als einen praktischen Fall ein Blick.

Die Funktion muss wie oben gezeigt implementiert werden

1. Laden Sie die Seite zum ersten Mal und markieren Sie die entsprechende Option entsprechend der Kategorie-ID in den Daten
2. Klicken Sie auf eine bestimmte Option. Diese Option wird hervorgehoben, und die anderen werden hervorgehoben.

Codestruktur:

<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>

Selbstverständnis

Ich glaube, ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Angular-Druckseite angegebene Funktion

Wie JSON-Server Back-End-Daten erstellt

Das obige ist der detaillierte Inhalt vonWie man in praktischen Projekten dafür sorgt, dass sich die Vue2.0-Radioauswahl gegenseitig ausschließt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!