Comment configurer une zone de sélection déroulante dans Vue.js

Vue.js est un framework JavaScript léger largement utilisé dans le développement Web. Cet article explique principalement comment configurer une zone de sélection déroulante dans Vue.js.

1. Définir les données dans l'instance Vue

Dans l'instance Vue, vous pouvez définir les données à l'aide de l'option data, par exemple :

data() {
  return {
    selectedValue: ''
  }
}

Ici, nous définissons un attribut de données appelé selectedValue et l'initialisons à une chaîne vide.

2. Liez la valeur de la zone de sélection déroulante aux attributs de l'instance Vue

Dans la zone de sélection déroulante, nous devons utiliser la directive v-model pour lier la valeur sélectionnée aux attributs de la Instance Vue. Par exemple :

<select v-model="selectedValue">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Ici, nous lions la valeur sélectionnée de la zone de sélection déroulante à la propriété selectedValue dans l'instance Vue.

3. Obtenir la valeur sélectionnée dans la zone de sélection déroulante

Nous pouvons utiliser l'option méthodes pour définir une méthode nommée getSelectedValue pour obtenir la valeur sélectionnée dans la zone de sélection déroulante.

methods: {
  getSelectedValue() {
    console.log(this.selectedValue);
  }
}

Ici, nous définissons une méthode pour imprimer la valeur de l'attribut selectedValue dans l'instance Vue via console.log.

4. Exemple de code complet

Ce qui suit est un exemple complet de zone de sélection déroulante, comprenant la définition des données, la liaison de la valeur de la zone de sélection déroulante aux propriétés de l'instance Vue et l'obtention de la valeur sélectionnée :

<div id="app">
  <select v-model="selectedValue" @change="getSelectedValue">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedValue: ''
    }
  },
  methods: {
    getSelectedValue() {
      console.log(this.selectedValue);
    }
  }
})
</script>

5. Résumé

Grâce à l'exemple ci-dessus, nous pouvons constater que définir une zone de sélection déroulante dans Vue est très simple. Il vous suffit de définir les données, de lier la valeur de la zone de sélection déroulante à la. propriétés dans l'instance Vue, puis obtenez la valeur sélectionnée par la zone de sélection déroulante selon les besoins.

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!