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

Vue 3 Программирование и разработка

Привязка ввода формы с опцией выбора используется для обработки привязки значения для элемента выбора. Элемент 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>

Шаг 4: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

После успешной сборки проекта откройте http://localhost:3000, и результат будет следующим.

Читайте также:  C++ string::npos

Выход:

ите проект с помощью следующей команды и посмотрит

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector