Comment obtenir la valeur de textarea dans Uniapp

Lors de l'utilisation du composant textarea dans uniapp, nous devons obtenir le texte saisi par l'utilisateur dans le composant. Alors, comment obtenir la valeur de textarea ? Ensuite, répondons-y en détail.

1. Utilisation de base de textarea

Tout d'abord, nous devons comprendre l'utilisation de base du composant textarea. Dans uniapp, l'utilisation du composant textarea doit être introduite dans le modèle. L'exemple de code est le suivant :

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      value="{{textValue}}" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

Dans le code ci-dessus, nous lions une variable textValue via la valeur et une méthode inputHandle via l'événement d'entrée. Parmi eux, le style définit la hauteur du composant textarea.

2. Obtenez la valeur de textarea via une liaison bidirectionnelle

Dans le code ci-dessus, nous lions la valeur de textarea à la variable textValue via une liaison bidirectionnelle. Lorsque l'utilisateur saisit du contenu dans la zone de texte, la valeur de la variable textValue changera également. À ce stade, nous pouvons obtenir la valeur de textarea via la variable textValue. L'exemple de code est le suivant :

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      v-model="textValue" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        textValue: '' // 绑定值
      }
    },
    methods: {
      inputHandle(e) {
        console.log(e.detail.value) // 获取输入的值
      }
    }
  }
</script>

Dans le code ci-dessus, nous lions la variable textValue via la directive v-model. Lorsque l'utilisateur entre du contenu dans la zone de texte, la valeur de la variable textValue changera également. Grâce à l'événement @input, nous obtenons la valeur d'entrée dans la méthode inputHandle et nous pouvons obtenir la valeur de la zone de texte.

3. Obtenez la valeur de textarea via l'attribut ref

En plus de la méthode de liaison bidirectionnelle, nous pouvons également obtenir la valeur de textarea via l'attribut ref. Définissez l'attribut ref sur le composant textarea, puis récupérez l'instance du composant via this.$refs dans le code, et enfin obtenez la valeur du textarea via l'attribut value de l'instance. L'exemple de code est le suivant :

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      ref="myTextarea" 
      @input="inputHandle"
    ></textarea>
    <button @click="getValue">获取值</button>
  </view>
</template>

<script>
  export default {
    methods: {
      inputHandle(e) {
        console.log(e.detail.value)
      },
      getValue() {
        const myTextarea = this.$refs.myTextarea // 获取组件实例
        console.log(myTextarea.value) // 获取输入的值
      }
    }
  }
</script>

Dans le code ci-dessus, nous avons attribué un nom myTextarea au composant textarea via l'attribut ref. Dans la méthode getValue, obtenez l'instance du composant myTextarea via this.$refs, et enfin obtenez la valeur d'entrée via l'attribut value de l'instance pour obtenir la valeur de la zone de texte.

Résumé

Grâce à l'introduction ci-dessus, nous pouvons voir qu'obtenir la valeur de textarea est très simple. Dans uniapp, nous pouvons obtenir la valeur de textarea via une liaison bidirectionnelle ou via l'attribut ref. Quelle que soit la méthode que vous choisissez, vous pouvez facilement manipuler le composant textarea pour obtenir le texte qui y est saisi. J'espère que cet article sera utile à tout le monde.

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!