18.04.2021
  • Главная
  • Карта сайта
  • Контакты
  • Конфиденциальность
Популярно

WhatsApp теперь позволяет вам контролировать добавление вас…

Samsung Galaxy Z Flip: новая премиальная «раскладушка»…

Xiaomi Mi 10 и Mi 10 Pro…

POCO X3 NFC представлен — новый народный…

Руководство для начинающих по политике перезапуска Docker

Чип Apple M1 революционизирует вычисления

Неудачное обновление для Mi Fit: «кривой» кириллический…

5 браузеров для Android с функциями приватности

Instagram получит новое приложение для обмена сообщениями

Как создать новый файл в Vim?

BestWebber

  • Новости
  • Заработок
  • Продвижение
  • Социальные сети
  • Веб-Мастеру
BestWebber
Веб-Мастеру

Vue Watch для динамического взаимодействия

by gidsoft19.03.202100
Поделиться

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

Vue.js предоставляет свойство watch для отслеживания переменной, и при изменении этой переменной он позволяет нам запускать функцию, чтобы мы могли выполнять динамическое взаимодействие. Давайте попробуем пример и получим некоторое динамическое взаимодействие с помощью свойства Vue Watch.

 

Пример

Сначала мы попытаемся изменить некоторую переменную одним нажатием кнопки, а затем, используя свойство watch, мы будем наблюдать за этой переменной и изменять некоторые другие переменные, чтобы внести динамические изменения на веб-странице.

Во-первых, предположим, что у нас есть две переменные.
data() {
return {
buttonBool: true,
color: "red"
}
}

 

И мы связали переменную buttonBool с элементом кнопки в шаблоне.

<template>

<div class="test">

<h1>This is a testing page</h1>

<button @click="buttonBool=!buttonBool">Click me!</button>

</div>

Мы хотим изменить цвет фона, скажем, деления одним нажатием кнопки. Итак, сначала создайте div в шаблоне.

<template>

<div class="test">

<h1>This is a testing page</h1>

<button @click="buttonBool=!buttonBool">Click me!</button>

<div></div>

</div>

</template>

Теперь давайте сначала создадим свойство часов и изменим состояние переменной «цвет» при изменении переменной «buttonBool».

watch:{
buttonBool(){
this.color = !this.color;
}
}

Хорошо! Остался последний шаг – изменить классы div при изменении переменной цвета. Итак, давайте сделаем это, используя функцию привязки классов Vue.js.

<template>

<div class="test">

<h1>This is a testing page</h1>

<button @click="buttonBool=!buttonBool">Click me!</button>

<div :class="[color ? 'red' : 'green', 'box']"></div>

</div>

</template>

Здесь я только что назначил класс «красный», если состояние переменной «цвет» истинно, иначе «зеленый», если состояние переменной цвета «ложно», и класс «короб» назначается в любом случае. .

CSS для задания ширины, высоты и цвета фона для div выглядит следующим образом.

<style scoped>

.box{
width: 100px;
height: 100px;
margin: 15px auto;
}

.red{
background-color: red;
}

.green{
background-color: green;
}

</style>

Хорошо, после того, как я закончу кодирование, моя веб-страница будет такой.

Vue Watch для динамического взаимодействия

 

Теперь, когда мы нажимаем кнопку, цвет фона поля должен изменяться.

Vue Watch для динамического взаимодействия

 

И вы можете увидеть на гифке выше, что цвет div меняется при нажатии кнопки. Это потрясающе, правда!

Итак, вот как мы можем использовать Vue Watch для динамического взаимодействия на веб-странице.

Читать  Как создать простое приложение на языке Go

 

Вывод

В этом посте мы попытались изменить состояние некоторой переменной щелчком или изменением какой-либо другой переменной, используя свойство watch Vue.js. Мы также внесли некоторые динамические изменения в веб-страницу. Мы видели, что при нажатии кнопки в атрибуте on-click мы изменили состояние переменной и показали, что свойство watch отслеживает переменную и выполняет некоторые действия, такие как изменение состояния какой-либо другой переменной.

Источник: AndreyEx.ru

Поделиться
предыдущая запись
Xiaomi собирается снабдить планшет Mi Pad 5 стилусом Mi Stylus
следующая запись
Процесс миграции сервера с полезными советами и важными контрольными списками

Похожие записи

Удаление групп в Linux с помощью команды groupdel2 мин для чтения

gidsoft04.01.2021

Лучшие дистрибутивы на основе ArchLinux

gidsoft25.12.2019

Исправление предупреждения PHP: mysqli_real_connect(): (HY000/2002): with WP CLI and MAMP

gidsoft29.04.2019

Как перенаправить URL-адреса www на без-www в WordPress

gidsoft24.07.2019

JavaScript — DOM: типы узлов

gidsoft07.12.2018

Как в LibreOffice сделать альбомную страницу

gidsoft18.01.2019

Создание сайта электронной коммерции для очков. С чего начать. Часть 2

gidsoft14.03.2021

Лучшие редакторы изображений Linux

gidsoft11.12.2018

Как сменить владельца папки Linux

gidsoft07.12.2020
Нажмите, чтобы оставить комментарий
  • Комментарии
  • Комментарии в Facebook

Категории

  • Веб-Мастеру (3 449)
  • Заработок в интернете (157)
  • Мобильные технологии (379)
    • Android (215)
    • Apple (164)
    • Игры (20)
    • Программы (102)
    • Технологии (98)
  • Новости рынка (2 447)
  • Программирование (199)
    • JavaScript (14)
    • PHP (140)
      • Laravel (124)
    • WordPress (18)
    • Различные CMS (27)
  • Продвижение в интернете (730)
  • Социальные сети (290)
BestWebber
Подпишись
Все материалы на данном сайте взяты из открытых источников - имеют обратную ссылку на материал в интернете или присланы посетителями сайта и предоставляются исключительно в ознакомительных целях.

Права на материалы принадлежат их владельцам. Администрация сайта ответственности за содержание материала не несет.

© Copyright 2021, Все права на материалы, размещенные на этом сайте - принадлежат их правообладателям.
  • Новости
  • Заработок
  • Продвижение
  • Социальные сети
  • Веб-Мастеру
BestWebber
  • Новости
  • Заработок
  • Продвижение
  • Социальные сети
  • Веб-Мастеру