Привязка ввода формы Vue.js с опцией выбора

Привязка ввода формы с опцией выбора используется для обработки привязки значения для элемента выбора. Элемент select использует значение в качестве реквизита и изменяется как событие для директивы v-model, которая поддерживает привязку нестрокового значения. Начальное значение параметра выбора игнорируется и всегда рассматривает текущее изменение как значение. Мы можем сделать параметр выбора v-model для сохранения различных типов данных, отличных от строковых чисел.

Синтаксис : для выбранных элементов просто добавьте директиву v-model и оставьте ее либо одной, либо несколькими, как показано ниже:

<!-- Single -->
<select v-model="selected">
  <option value="Option 1">Option 1</option>
  ...
</select> 

<!-- Multiple -->
<select v-model="mselected" multiple>
  <option value="Option 1">Option 1</option>
  ...
</select>

<!-- Select Option -->
<select v-model="selected">
  <option :value="{ number:1 }">1</option>
  ...
</select>

Пример: В следующем примере у нас есть два элемента select, один единственный и один множественный. Параметр одиночного выбора сохраняет одно значение из раскрывающегося списка выбора, а параметр множественного выбора сохраняет массив выбранных значений.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js, используя следующую команду.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта: После успешной установки будет сформирована следующая структура проекта.

Структура проекта

Шаг 2. В файле App.vue добавьте элементы данных, категорию и язык для модификатора v-model. Vue.js будет хранить значения одиночного выбора и множественного выбора из параметров в этих элементах данных.

<script>

export default {

  data() {

    return {

      category: '',

      language: '',

    }

  },

}

</script>

Шаг 3: В разделе шаблона добавьте два элемента выбора, один с одним параметром выбора, а другой с несколькими параметрами выбора.

<template>

  <center>

    <h1 style="text-align: center;

        color: green">GeeksforGeeks</h1>

    <strong>

        Vue.js Form Input Binding with Select option

    </strong>

    <br />

  </center>

  <center>

    <div>

      Data Structure : {{ category }}

      <br />

      <select v-model="category">

        <option value="Array">Array</option>

        <option value="Queue">Queue</option>

        <option value="Priority Queue">Priority Queue</option>

        <option value="Linked List">Linked List</option>

      </select>

    </div>

    <br />

    <div>

      Programming Language : {{ language }}

      <br />

      <select v-model="language" multiple>

        <option value="Java">Java</option>

        <option value="C++">C++</option>

        <option value="Python">Python</option>

        <option value="Javascript">Javascript</option>

      </select>

    </div>

    <br />

    <div>

      Select the number:

      <select v-model="choose">

        <option :value="{ number: 987 }">987</option>

        <option :value="{ number: 258 }">258</option>

        <option :value="{ number: 456 }">456</option>

      </select>

    </div>

  </center>

</template>