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>
Хорошо, после того, как я закончу кодирование, моя веб-страница будет такой.
Теперь, когда мы нажимаем кнопку, цвет фона поля должен изменяться.
И вы можете увидеть на гифке выше, что цвет div меняется при нажатии кнопки. Это потрясающе, правда!
Итак, вот как мы можем использовать Vue Watch для динамического взаимодействия на веб-странице.
В этом посте мы попытались изменить состояние некоторой переменной щелчком или изменением какой-либо другой переменной, используя свойство watch Vue.js. Мы также внесли некоторые динамические изменения в веб-страницу. Мы видели, что при нажатии кнопки в атрибуте on-click мы изменили состояние переменной и показали, что свойство watch отслеживает переменную и выполняет некоторые действия, такие как изменение состояния какой-либо другой переменной.