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

Vue.js は、インタラクティブなユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、テキスト ボックスはユーザー入力を処理するための重要なコンポーネントの 1 つです。この記事では、Vueでテキストボックスを作成し、その値を取得する方法を紹介します。

1. テキスト ボックスの作成

Vue でテキスト ボックスを作成するには、Vue の v-model ディレクティブを使用する必要があります。この命令は、変数とテキスト ボックス間の関係をバインドします。テキスト ボックスに値を入力すると、変数の値が自動的に更新されます。単純なテキスト ボックスの例を次に示します。

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

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

この例では、テキスト ボックスを作成し、v-model ディレクティブを使用してメッセージ変数にバインドします。この時点で、テキスト ボックスに値を入力すると、メッセージ変数の値が自動的に更新されます。

2. テキスト ボックスの値を取得する

v-model ディレクティブを使用すると、Vue でテキスト ボックスをすばやく作成できます。しかし、テキスト ボックスの値を取得するにはどうすればよいでしょうか? Vue のイベント メカニズムを使用して、テキスト ボックスの値の変化を監視し、必要に応じて値を取得できます。

Vue では、v-on ディレクティブを使用してイベントをリッスンできます。テキスト ボックスで v-on:input ディレクティブを使用すると、入力イベントをリッスンし、イベント ハンドラーでテキスト ボックスの値を取得できます。以下に例を示します。

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

この例では、テキスト ボックスで v-on:input ディレクティブを使用して入力イベントをリッスンし、イベント ハンドラー updateMessage でテキスト ボックスの値を取得します。 event.target.value を使用してテキスト ボックスの値を取得し、それをメッセージ変数に割り当てることができます。

v-on ディレクティブを使用してイベントをリッスンするだけでなく、計算属性を使用してテキスト ボックスの値を取得することもできます。計算された属性の値は、その依存関係に基づいて自動的に更新されます。計算されたプロパティでゲッターとセッターを使用すると、テキスト ボックスの値を簡単に取得および設定できます。以下は、計算プロパティの使用例です。

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

この例では、計算プロパティ messageValue を作成します。ゲッターとセッターを使用すると、テキスト ボックス内の値を簡単に取得および設定できます。テンプレートでは、引き続き v-model ディレクティブを使用してテキスト ボックスをメッセージ変数にバインドします。計算されたプロパティはメッセージ変数を使用するため、テキスト ボックスに値を入力すると、messageValue が自動的に更新されます。

概要

Vue では、テキスト ボックスはユーザー入力を処理するために使用される重要なコンポーネントです。 v-model ディレクティブを使用すると、テキスト ボックスをすばやく作成し、変数にバインドできます。イベントをリッスンするか、計算されたプロパティを使用することで、テキスト ボックスの値を簡単に取得し、必要に応じて値を更新できます。これらのヒントを使用すると、Vue でインタラクティブなユーザー インターフェイスをすばやく構築できます。

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