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

Опубликовано: 11 Августа, 2022

Vue.js — это прогрессивная среда JavaScript для разработки пользовательских веб-интерфейсов. Это универсальный фреймворк, обеспечивающий высокую скорость и производительность. Мы можем создавать одностраничные приложения, а также приложения полного стека.

Привязка ввода используется для синхронизации и поддержания состояния элементов ввода формы с соответствующим состоянием в javascript. Таким образом, Vue.js предоставляет директиву v-model, которая упрощает задачу поддержания состояния форм за счет простой реализации.

Input Binding with Radio Option использует проверенное свойство и событие изменения для директивы v-model . Начальное значение и проверенное значение игнорируются и обновляются, когда пользователь взаимодействует с элементом.

Синтаксис: Создайте элемент ввода типа радио и добавьте директиву v-model следующим образом:

// Data initialized in Vue.js
data() {
  return {
    tutorials: "",
  }
},

<!-- Radio option -->
<input v-model="tutorials" 
       type="radio" 
       value="Data Structures"
       name="ds" />
<label for="ds">Data Structures</label>

Пример . В следующем примере у нас есть три параметра радио с директивой v-model, из которых мы можем выбрать любой из них. После выбора опции радио значение опции радио сохраняется в v-модели, которую можно отобразить на веб-странице.

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

npm init vue@latest

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

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

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

вид приложения:

Javascript

<script>
export default {
  data() {
    return {
      tutorials: "",
    }
  },
}
</script>

Шаг 3: Теперь в разделе шаблонов добавьте элементы ввода типа радио и укажите учебные пособия как v-model . Когда выбрана какая-либо опция радио , мы получим значение выбранного радиоэлемента. Необходимо упомянуть значение входных элементов.

вид приложения:

Javascript

<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
            GeeksforGeeks
    </h1>
    <strong>
        Vue.js Form Input Value Binding with Radio option
    </strong>
    <br />
  </center>
  <center>
    <p>Tutorials:{{ tutorials }}</p>
    <input v-model="tutorials" 
           type="radio" 
           value="Data Structures" 
           name="ds" />
    <label for="ds">Data Structures</label>
    <input v-model="tutorials" 
           type="radio" 
           value="Algorithms" 
           name="al" />
    <label for="al">Algorithms</label>
    <input v-model="tutorials"
             type="radio"
             value="Machine Learning"
             name="ml" />
    <label for="ml">Machine Learning</label>
  </center>
</template>

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

npm run dev

Вывод: проект запустится на http://localhost:3000/ и результат будет следующим:

Ссылка: https://vuejs.org/guide/essentials/forms.html#radio

JavaScript Picked

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

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ