vueでドロップダウンボックスの値を取得する方法

Vue では、ドロップダウン ボックスの値を取得する方法が 2 つあります。 1. 双方向バインディングに v-model ディレクティブを使用します。 2. ドロップダウン ボックスの変更イベントをローカルでリッスンします。ダウンボックスをクリックして値を取得します。

Vue でドロップダウン ボックスの値を取得する方法

Vue には 2 つの方法がありますドロップダウン ボックスの値:

1 を取得します。v-model

v-model ディレクティブはドロップの値を双方向にバインドできます。コンポーネント内の -down ボックスと Vue データ テンプレートで使用します:

<code class="html"><select v-model="selectedValue">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
</select></code>

次に、JavaScript で selectedValue データにアクセスします:

<code class="javascript">const selectedValue = this.selectedValue;</code>

2。イベント リスニング

ドロップダウン ボックスで change イベントをリッスンし、イベント ハンドラーで値を取得できます:

<code class="html"><select @change="handleChange">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
</select></code>

<code class="javascript">methods: {
  handleChange(event) {
    const selectedValue = event.target.value;
  }
}</code>

どの方法でもを使用すると、Vue のドロップダウン ボックスの値を簡単に取得できます。

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