Maison > interface Web > js tutoriel > le corps du texte

Comment faire en sorte que Vue2.0 rende la sélection radio mutuellement exclusive

php中世界最好的语言
Libérer: 2018-04-28 13:50:18
original
1838 Les gens l'ont consulté

Cette fois, je vais vous montrer comment faire en sorte que Vue2.0 rende une sélection unique mutuellement exclusive. Quelles sont les précautions pour que Vue2.0 rende une sélection unique mutuellement exclusive. jetez un oeil une fois.

Cet article présente la méthode de mise en œuvre de l'exclusion mutuelle de sélection radio dans Vue2.0 et la partage avec tout le monde. Les détails sont les suivants :

Besoin de. implémentez la fonction comme indiqué ci-dessus

1 Lors du premier chargement de la page, mettez en surbrillance l'option correspondante en fonction du catgoryId dans les données
2. Cliquez sur une option, l'option sera mise en surbrillance, et les autres options seront supprimées de la mise en évidence

Structure du code :

<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>
Copier après la connexion

Compréhension de soi

Je crois que vous avez maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des composants communs dans vue

Quelles sont les méthodes pour faire fonctionner le rendu exécution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal