uniappでtextareaの値を取得する方法

uniapp で textarea コンポーネントを使用する場合、ユーザーがコンポーネントに入力したテキストを取得する必要があります。では、textarea の値を取得するにはどうすればよいでしょうか?次に、詳しく答えてみましょう。

1. textarea の基本的な使い方

まず、textarea コンポーネントの基本的な使い方を理解する必要があります。 uniapp では、textarea コンポーネントをテンプレートに導入する必要があります。サンプル コードは次のとおりです:

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

上記のコードでは、value を介して textValue 変数をバインドし、入力イベントを介して inputHandle メソッドをバインドします。このうち、style は textarea コンポーネントの高さを設定します。

2. 双方向バインディングを通じて textarea の値を取得する

上記のコードでは、双方向バインディングを通じて textarea の値を textValue 変数にバインドします。ユーザーがテキストエリアにコンテンツを入力すると、textValue 変数の値も変更されます。この時点で、textValue 変数を通じて textarea の値を取得できます。サンプル コードは次のとおりです:

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

上記のコードでは、v-model ディレクティブを通じて textValue 変数をバインドします。ユーザーが textarea にコンテンツを入力すると、textValue 変数の値も変更されます。 @input イベントを通じて、inputHandle メソッドで入力値を取得し、テキストエリアの値を取得できます。

3. ref 属性を通じて textarea の値を取得する

双方向バインド方法に加えて、ref 属性を通じて textarea の値を取得することもできます。 textarea コンポーネントに ref 属性を設定し、コード内の this.$refs を通じてコン​​ポーネントのインスタンスを取得し、最後にインスタンスの value 属性を通じて textarea の値を取得します。サンプル コードは次のとおりです。

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

上記のコードでは、ref 属性を使用して、myTextarea という名前を textarea コンポーネントに割り当てました。 getValue メソッドでは、this.$refs を通じて myTextarea コンポーネントのインスタンスを取得し、最後にインスタンスの value 属性を通じて入力値を取得して textarea の値を取得します。

概要

上記の導入を通じて、textarea の値を取得するのが非常に簡単であることがわかります。 uniapp では、双方向バインディングまたは ref 属性を通じて textarea の値を取得できます。どの方法を選択しても、textarea コンポーネントを簡単に操作してテキストを入力できます。この記事が皆さんのお役に立てば幸いです。

以上がuniappでtextareaの値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。