Comment implémenter la multi-sélection et les boutons radio dans Vue

Vue est un framework JavaScript très populaire qui aide les développeurs à créer rapidement des applications Web interactives. Cet article présentera comment Vue implémente la sélection multiple et les boutons radio.

Boutons à choix multiples

Les boutons à choix multiples sont généralement utilisés pour permettre aux utilisateurs de sélectionner plusieurs options. Dans Vue, nous pouvons implémenter des boutons à sélection multiple via la directive v-model et les éléments de case à cocher.

Tout d'abord, nous devons définir un tableau dans l'instance Vue. Ce tableau stockera toutes les options sélectionnées. Nous pouvons représenter chaque option comme un objet et les restituer sur la page en utilisant la directive v-for :

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" :value="option" v-model="selectedOptions">
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

Dans le code ci-dessus, nous utilisons la directive v-for pour restituer la liste des options sur la page et restituer chaque valeur. de chaque option est lié à l’attribut value de l’élément d’entrée. Nous utilisons également la directive v-model pour lier les options sélectionnées dans le tableau selectedOptions.

Lorsque l'utilisateur sélectionne une ou plusieurs options, le tableau selectedOptions sera mis à jour et affiché sur la page. Nous pouvons accéder à ces options dans d'autres parties du code et les utiliser pour effectuer d'autres opérations.

Boutons radio

Les boutons radio sont généralement utilisés pour permettre à l'utilisateur de sélectionner une option parmi un ensemble d'options. Dans Vue, nous pouvons implémenter des boutons radio via la directive v-model et l'élément radio.

Contrairement aux boutons à sélection multiple, les boutons radio ne peuvent sélectionner qu'une seule option. Nous pouvons représenter chaque option comme un objet et les restituer sur la page en utilisant la directive v-for :

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="radio" :value="option" v-model="selectedOption">
      {{ option.label }}
    </label>
    <p>Selected option: {{ selectedOption.label }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOption: null
    };
  }
};
</script>

Dans le code ci-dessus, nous utilisons la directive v-for pour restituer la liste des options sur la page et restituer chaque valeur. de chaque option est lié à l’attribut value de l’élément d’entrée. Nous utilisons également la directive v-model pour lier l'option sélectionnée à la variable selectedOption.

Lorsque l'utilisateur sélectionne une option, la variable selectedOption sera mise à jour et affichée sur la page. Nous pouvons accéder à cette option dans d’autres parties du code et l’utiliser pour effectuer d’autres opérations.

Dans l'ensemble, Vue rend la mise en œuvre de la sélection multiple et des boutons radio très simple. En utilisant simplement la directive v-model et les éléments HTML associés, nous pouvons créer des applications Web interactives et permettre aux utilisateurs de sélectionner les options dont ils ont besoin.

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!