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мотрите другие статьи: