vueで値を取得する方法

Vue は、双方向バインディング用の糖衣構文を提供する人気のある Web 開発フレームワークです。 Vue では、ページ上のデータを簡単に取得し、その変更にリアルタイムで対応できます。この記事では、Vue で値を取得する方法について説明します。

Vue で値を取得するには主に 2 つの方法があります。1 つは命令を使用する方法、もう 1 つは計算されたプロパティを使用する方法です。

命令を使用して値を取得する

Vue には、ページ上の input、select、およびその他のタイプの値を簡単に取得するための命令がいくつか用意されています。

v-model ディレクティブ

v-model ディレクティブは、Vue で値を取得するために最も一般的に使用されるディレクティブです。フォーム要素の値をバインドし、自動的にバインドするために使用できます。ユーザーが入力したときにデータを更新します。たとえば、次のコードでは、v-model ディレクティブを使用して、入力ボックスの値をデータ オブジェクトのメッセージ プロパティにバインドします。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

さて、入力ボックスにテキストを入力すると、 Vue ではデータ内の message 属性値がバックグラウンドで自動更新され、p タグ内に表示されます。

v-bind ディレクティブ

v-bind ディレクティブを使用すると、テンプレート内の 1 つ以上の属性を動的にバインドできます。たとえば、次のコードでは、v-bind を使用して、a タグの href 属性をデータ オブジェクトの url 属性にバインドします:

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

v-on directive

v- on ディレクティブ イベントをバインドするために使用できます。たとえば、次のコードでは、v-on を使用してボタン ラベルのクリック イベントをバインドします。ボタンがクリックされると、Vue はデータ オブジェクトの increment メソッドを自動的に呼び出します。 Value を取得するためのプロパティ

Vue では、計算されたプロパティを使用して値を取得することもできます。計算プロパティは、値が他のデータの計算に基づいているキャッシュ メカニズムを備えたプロパティです。依存するデータが変更されると、自動的に再計算されます。

計算プロパティの基本的な使用法

たとえば、次のコードでは、reversedMessage という名前の計算プロパティを宣言し、その値はデータ オブジェクトのメッセージ プロパティの文字列を逆にしたものです。

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

計算プロパティの取得および設定メソッド

get メソッドを使用して計算プロパティの値を定義するだけでなく、set メソッドを使用して計算プロパティの値を定義することもできます。たとえば、以下のコードでは、fullName という計算プロパティを宣言します。このプロパティの値は、データ オブジェクトの firstName プロパティと lastName プロパティを連結したものです。 fullName の値を変更すると、Vue は自動的に set メソッドを呼び出して、データ オブジェクトの firstName プロパティと lastName プロパティを同時に更新します。 use v-model、v-bind、v-on などの命令を使用してページ上のデータを取得します。また、計算されたプロパティを使用してデータを計算し、新しい値を生成することもできます。これらの方法により、Vue は非常に便利なデータ取得方法を提供し、さまざまなビジネス ニーズに簡単に対応できるようになります。

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