Vue.js でドロップダウン選択ボックスを設定する方法

Vue.js は、Web 開発で広く使用されている軽量の JavaScript フレームワークです。この記事では主にVue.jsでドロップダウン選択ボックスを設定する方法を紹介します。

1. Vue インスタンスでのデータの定義

Vue インスタンスでは、data オプションを使用してデータを定義できます。例:

data() {
  return {
    selectedValue: ''
  }
}

Hereでは、selectedValue という名前のデータ プロパティを定義し、空の文字列に初期化します。

2. ドロップダウン選択ボックスの値を Vue インスタンスの属性にバインドします

ドロップダウン選択ボックスでは、v- model ディレクティブを使用して、選択した値を Vue インスタンスのプロパティにバインドします。例:

<select v-model="selectedValue">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

ここでは、ドロップダウン選択ボックスの選択された値を Vue インスタンスの selectedValue プロパティにバインドします。

3. ドロップダウン選択ボックスで選択された値を取得する

メソッド オプションを使用して、getSelectedValue という名前のメソッドを定義し、ドロップダウンで選択された値を取得できます。下の選択ボックス。

methods: {
  getSelectedValue() {
    console.log(this.selectedValue);
  }
}

ここでは、console.log を通じて Vue インスタンスの selectedValue 属性の値を出力するメソッドを定義します。

4. 完全なサンプル コード

以下は、データの定義、ドロップダウン選択ボックスの値のバインドを含む、ドロップダウン選択ボックスの完全な例です。 Vue インスタンスのプロパティ、および Selected 値の取得:

<div id="app">
  <select v-model="selectedValue" @change="getSelectedValue">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedValue: ''
    }
  },
  methods: {
    getSelectedValue() {
      console.log(this.selectedValue);
    }
  }
})
</script>

5. summary

上記の例を通じて、Vue でドロップダウン選択ボックスを設定していることがわかります。非常に簡単です。データを定義してドロップダウン ボックスをバインドするだけです。選択ボックスの値と Vue インスタンスの属性を選択し、必要に応じてドロップダウン選択ボックスの選択された値を取得します。

以上がVue.js でドロップダウン選択ボックスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。