Checkbox, radio кнопки и select в формах Vue

В прошлой статье "Формы в Vue" мы разобрали только самые простые элементы форм. Но вреймворк Vue умеет взаимодействовать с такими элементами форм как чекбоксы, радио кнопки и выпадающие списки. Для демонстрации этих функций потребуется всё та же директива v-model.

Чекбоксы

Простейшая демонстрация работы с чекбоксом - это вывод его состояния. Всё что нам нужно - это поставить директиву "v-model" для элемента и создать соответствующую её значению переменную в настройке "data".
<div id="application">
   <input type="checkbox" v-model="checked">
   <p>Чекбокс в состоянии: {{ checked }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         checked: false
      },
   });
</script>
Свойство "checked" может иметь два значения: true (галочка стоит) и false (галочки нет).

Попробуйте запустить код и понаблюдать за строкой "Чекбокс в состоянии", кликая на чекбокс. Там будет отображаться:
  • Чекбокс в состоянии: true
  • Чекбокс в состоянии: false
Этот вид не совсем удобный. Попробуем использовать оператор, который обсуждали в статье "Тернарный оператор в Vue", чтобы улучшить вывод. Получится так:
<div id="application">
   <input type="checkbox" v-model="checked">
   <p>Чекбокс в состоянии: {{ checked ? 'галка есть' : 'галки нет' }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         checked: false
      },
   });
</script>
Запустите такой код и попробуйте кликнуть несколько раз на чекбокс. Варианты текста рядом с ним будут следующие:
  • Чекбокс в состоянии: галка есть
  • Чекбокс в состоянии: галки нет
Чекбоксы имеют возможность мультивыбора, в отличии от радиокнопок. То есть несколько чекбоксов могут быть отмечены галками одновременно. Такое поведение может обрабатываться фреймворком Vue. Продемонстрируем это, добавив тексколько чекбоксов с различными значениями value:
<div id="application">
   <input type="checkbox" v-model="animals" value="Мышь">
   <input type="checkbox" v-model="animals" value="Кот">
   <input type="checkbox" v-model="animals" value="Котята">
   <p>Животные: {{ animals }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animals: [ ] // массив 
      },
   });
</script>
Как можно заметить, мы использовали несколько элементов с одинаковой директивой v-model="animals". Поэтому в настройке data мы поставили значение для animals равной пустому массиву. Теперь попробуйте загрузить код этого примера и кликнуть на несколько чекбоксов.

Радиокнопочки

Взаимодействие с радио кнопками почти ничем не отличается от чекбоксов. Поэтому можем переписать предыдущий пример заменим "checkbox" на "radio" и добавив атрибут "name", чтобы обозначить группу кнопкок, между которым может происходить переключение:
<div id="application">
   <input name="animal" type="radio" v-model="animals" value="Мышь">
   <input name="animal" type="radio" v-model="animals" value="Кот">
   <input name="animal" type="radio" v-model="animals" value="Котята">
   <p>Животные: {{ animals }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animals: '' // строка 
      },
   });
</script>
При клике на радио кнопке в свойство "animals" будет попадать значение, указанное в атрибуте "value". То есть строка.

Селекты

Для взаимодействия тега выпадающего списка "select" и фреймворка Vue используется всё та же директива "v-model". Аналогично радиокнопке, в свойство, привязанное к выпадающему списку, будет попадать строковое значение. Но в случае "select" это будут значения, которые стоят внутри выбранных тегов "options":
<div id="application">
   <select v-model="animal">
      <option>Мышь</option>
      <option>Кот</option>
      <option>Котята</option>
   </select>
   <p>Выбран пункт: {{ animal }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         animal: '' // строка 
      },
   });
</script>
В реальных проектах пункты выпадающего списка часто генерируются из массивов. Попробуем сделать пример такого кода, используя уже изученную в статье "Циклы в Vue" директиву v-for:
<div id="application">
   <select v-model="selectedAnimal">
      <option v-for="animal in animals">{{ animal }}</option>
   </select>
   <p>Выбран пункт: {{ selectedAnimal }}<p>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         selectedAnimal: ''
         animals: ['Мышь', 'Кот', 'Котята'] 
      },
   });
</script>
В этом примере мы программно создаём пункты выпадающего списка, используя элементы массива в свойстве "animals". А при выборе пункта из списка в свойство "selectedAnimal" записывается текст выбранного пункта.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Cмотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб