Comment obtenir la zone de texte vue

Vue.js est un framework JavaScript populaire pour créer des interfaces utilisateur interactives. Dans Vue, la zone de texte est l'un des composants importants pour le traitement des entrées de l'utilisateur. Cet article explique comment créer une zone de texte dans Vue et obtenir sa valeur.

1. Création d'une zone de texte

La création d'une zone de texte dans Vue nécessite l'utilisation de la directive v-model de Vue. Cette instruction lie la relation entre une variable et la zone de texte. Toute valeur saisie dans la zone de texte mettra automatiquement à jour la valeur de la variable. Voici un exemple simple de zone de texte :

<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Dans cet exemple, nous créons une zone de texte et la lions à la variable message à l'aide de la directive v-model. À ce stade, toute valeur saisie dans la zone de texte mettra automatiquement à jour la valeur de la variable de message.

2. Obtenir la valeur de la zone de texte

Avec la directive v-model, nous pouvons créer rapidement une zone de texte dans Vue. Mais comment obtenir la valeur dans la zone de texte ? Nous pouvons utiliser le mécanisme d'événements de Vue pour surveiller les modifications de la valeur de la zone de texte et obtenir la valeur en cas de besoin.

Dans Vue, vous pouvez utiliser la directive v-on pour écouter les événements. Nous pouvons utiliser la directive v-on:input sur la zone de texte pour écouter les événements d'entrée et obtenir la valeur de la zone de texte dans le gestionnaire d'événements. Voici un exemple :

<template>
  <div>
    <input type="text" v-model="message" v-on:input="updateMessage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(event) {
      this.message = event.target.value;
    }
  }
}
</script>

Dans cet exemple, nous utilisons la directive v-on:input sur la zone de texte pour écouter l'événement d'entrée et obtenir la valeur de la zone de texte dans l'événement gestionnaire updateMessage. Nous pouvons utiliser event.target.value pour obtenir la valeur de la zone de texte et l'attribuer à la variable de message.

En plus d'utiliser la directive v-on pour écouter les événements, nous pouvons également utiliser l'attribut calculé pour obtenir la valeur de la zone de texte. La valeur de l'attribut calculé est automatiquement mise à jour en fonction de ses dépendances. En utilisant des getters et des setters dans la propriété calculée, nous pouvons facilement obtenir et définir la valeur de la zone de texte. Voici un exemple d'utilisation de propriétés calculées :

<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  computed: {
    messageValue: {
      get() {
        return this.message;
      },
      set(value) {
        this.message = value;
      }
    }
  }
}
</script>

Dans cet exemple, nous créons une propriété calculée messageValue. Grâce aux getters et setters, nous pouvons facilement obtenir et définir la valeur dans la zone de texte. Dans le modèle, nous utilisons toujours la directive v-model pour lier la zone de texte à la variable de message. Étant donné que les propriétés calculées utilisent la variable de message, la saisie de n'importe quelle valeur dans la zone de texte met automatiquement à jour la valeur messageValue.

Résumé

Dans Vue, la zone de texte est un composant important pour le traitement des entrées de l'utilisateur. En utilisant la directive v-model, nous pouvons rapidement créer une zone de texte et la lier à une variable. En écoutant les événements ou en utilisant la propriété calculée, nous pouvons facilement obtenir la valeur de la zone de texte et mettre à jour la valeur si nécessaire. Grâce à ces conseils, nous pouvons rapidement créer des interfaces utilisateur interactives dans Vue.

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!