uniappテキストボックスの値を取得する方法

Uniapp は、開発者が複数のプラットフォームでアプリケーションを開発するプロセスを簡素化し、開発効率を向上させることができるクロスプラットフォーム開発フレームワークです。テキスト ボックスはアプリケーション開発時によく使用されるコンポーネントの 1 つであり、テキスト ボックス内の値をどのように取得するかは非常に一般的な問題です。この記事ではuniappでテキストボックスの値を取得する方法を紹介します。

1. v-model を使用して双方向データ バインディングを実装する

uniapp では、v-model ディレクティブを使用して双方向データ バインディングを実装できます。 v-model 命令をテキスト ボックスに追加して、テキスト ボックスの値を vue インスタンスのデータにバインドし、vue インスタンスのデータを取得することでテキスト ボックスの値を取得できるようにします。

例:

<template>
  <div>
    <input v-model="value" />
    <button @click="getValue">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    getValue() {
      console.log(this.value)
    }
  }
}
</script>

2. $refs 属性を使用してテキスト ボックス インスタンスを取得します

$refs 属性は vue で提供されており、テキスト ボックスは、この属性に対応するインスタンスを通じて取得できます。テキスト ボックスの値はインスタンスを通じて取得できます。

例:

<template>
  <div>
    <input ref="myInput" />
    <button @click="getValue">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
      console.log(this.$refs.myInput.value)
    }
  }
}
</script>

3. 入力イベントをリッスンしてテキスト ボックスの値をリアルタイムで取得します

値は次のように取得できます。入力イベントをリッスンすることで、テキスト ボックスをリアルタイムに表示します。テキスト ボックスに内容が入力されると入力イベントがトリガーされ、テキスト ボックス内の値がイベントで取得されます。

例:

<template>
  <div>
    <input @input="getValue" />
  </div>
</template>

<script>
export default {
  methods: {
    getValue(e) {
      console.log(e.target.value)
    }
  }
}
</script>

まとめ

v-model ディレクティブ、$refs 属性、入力イベントを使用してテキスト ボックスの値をそれぞれ取得し、適切な値を選択します。 1 つは特定の使用シナリオの方法に応じたものです。実際の開発において、テキストボックスの値を取得することは非常に一般的な操作であり、これらの方法をマスターすると開発効率が向上します。

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