Vue JS для новичков: работа с пользовательским вводом

Подготовка проекта

Код очищен: удалён HTML и CSS, оставлена базовая структура <script>. Функция data содержит свойство mess для будущих функций. Создадим простую форму для получения данных:

<input type="text" v-model="username">
<input type="password" v-model="userPass">
<input type="email" v-model="userMail">

Создадим переменные для хранения данных пользователя:

data() {
  return {
    username: '',
    userPass: '',
    userMail: ''
  }
}

Использование v-model

В Vue.js директива v-model обеспечивает удобный способ связывания значения поля ввода с переменной:

<input type="text" v-model="username">
<input type="password" v-model="userPass">
<input type="email" v-model="userMail">
<p>{{ username }}</p>
<p>{{ userPass }}</p>
<p>{{ userMail }}</p>

Данные автоматически выводятся на экран.

Добавление кнопки «Отправить» и обработка данных

Добавим кнопку «Отправить» и будем добавлять данные в массив users:

<button @click="sendData">Отправить</button>

data() {
  return {
    username: '',
    userPass: '',
    userMail: '',
    users: [],
    error: ''
  }
},
methods: {
  sendData() {
    if (this.username === '') {
      this.error = 'Имя не введено';
      return;
    }
    // ... аналогичные проверки для email и пароля
    this.users.push({ name: this.username, password: this.userPass, email: this.userMail });
    this.error = '';
    this.username = '';
    this.userPass = '';
    this.userMail = '';
  }
}

Добавлены проверки на пустые поля. При ошибке выводится сообщение, которое затем очищается. Данные добавляются в массив users.

Вывод массива пользователей с помощью v-for

Для перебора массива users и вывода его элементов используем директиву v-for:

<div v-for="(element, index) in users" :key="index" class="user">
  <h3>{{ element.name }}</h3>
  <p>{{ element.email }}</p>
  <p><b>{{ element.password }}</b></p>
</div>

v-for итеративно создаёт элементы <div> для каждого элемента массива. Атрибут :key обеспечивает уникальность ключей для каждого элемента. Добавлены стили к блоку .user.

Условный рендеринг с v-if, v-else-if, v-else

Добавим условный рендеринг для вывода сообщения о количестве пользователей:

<div v-if="users.length === 0" class="user">
  <p>У нас нет пользователей</p>
</div>
<div v-else-if="users.length === 1" class="user">
  <p>users has One Element</p>
</div>
<div v-else class="user">
  <p>users has More than One Element</p>
</div>

В зависимости от длины массива users отображается соответствующий блок.

Рассмотрены базовые приёмы работы с пользователем в Vue.js: получение данных с помощью v-model, обработка событий, добавление данных в массив и вывод массива с помощью v-for, а также условный рендеринг с помощью v-if, v-else-if и v-else. Это позволяет создавать интерактивные приложения, реагирующие на действия пользователя.