So erhalten Sie den Wert von textarea in uniapp

Bei Verwendung der Textarea-Komponente in Uniapp müssen wir den vom Benutzer in die Komponente eingegebenen Text abrufen. Wie erhält man also den Wert von textarea? Lassen Sie uns als Nächstes die Frage im Detail beantworten.

1. Grundlegende Verwendung von Textarea

Zunächst müssen wir die grundlegende Verwendung der Textarea-Komponente verstehen. In uniapp muss die Verwendung der Textarea-Komponente in die Vorlage eingeführt werden. Der Beispielcode lautet wie folgt:

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

Im obigen Code binden wir eine textValue-Variable über den Wert und eine inputHandle-Methode über das Eingabeereignis. Unter anderem legt der Stil die Höhe der Textbereichskomponente fest.

2. Ermitteln Sie den Wert von textarea durch bidirektionale Bindung.

Im obigen Code binden wir den Wert von textarea durch bidirektionale Bindung an die Variable textValue. Wenn der Benutzer Inhalte in den Textbereich eingibt, ändert sich auch der Wert der Variable textValue. An diesem Punkt können wir den Wert von textarea über die Variable textValue abrufen. Der Beispielcode lautet wie folgt:

<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>

Im obigen Code binden wir die Variable textValue über die V-Model-Direktive. Wenn der Benutzer Inhalte in den Textbereich eingibt, ändert sich auch der Wert der Variable textValue. Durch das @input-Ereignis erhalten wir den Eingabewert in der inputHandle-Methode und können den Wert des Textbereichs abrufen.

3. Ermitteln Sie den Wert von textarea über das ref-Attribut.

Zusätzlich zur bidirektionalen Bindungsmethode können wir den Wert von textarea auch über das ref-Attribut erhalten. Legen Sie das Ref-Attribut für die Textarea-Komponente fest, rufen Sie dann die Instanz der Komponente über this.$refs im Code ab und rufen Sie schließlich den Wert des Textbereichs über das Value-Attribut der Instanz ab. Der Beispielcode lautet wie folgt:

<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>

Im obigen Code haben wir der Textarea-Komponente über das ref-Attribut den Namen myTextarea zugewiesen. Rufen Sie in der getValue-Methode die Instanz der myTextarea-Komponente über this.$refs ab und rufen Sie schließlich den Eingabewert über das Wertattribut der Instanz ab, um den Wert des Textbereichs zu erhalten.

Zusammenfassung

Anhand der obigen Einführung können wir sehen, dass es sehr einfach ist, den Wert von textarea zu ermitteln. In uniapp können wir den Wert von textarea durch bidirektionale Bindung oder über das ref-Attribut erhalten. Unabhängig davon, für welche Methode Sie sich entscheiden, können Sie die Textbereichskomponente problemlos manipulieren, um den darin eingegebenen Text zu erhalten. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Wert von textarea in uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!