Vue.JS é uma estrutura front-end de JavaScript muito impressionante e reativa, usada para desenvolver sites de front-end de maneira rápida e fácil. Este post aprenderá sobre a propriedade Watch que é um dos conceitos mais fundamentais.

Vue.O JS fornece uma propriedade de relógio para assistir a uma variável e, na mudança dessa variável, ela nos permite executar uma função para que possamos fazer interação dinâmica. Vamos tentar um exemplo e ter alguma interação dinâmica usando a propriedade Vue Watch.

Exemplo

Primeiro, tentaremos alterar alguma variável com o clique de um botão e, em seguida, usando a propriedade Watch, assistiremos a essa variável e alteraremos alguma outra variável para fazer as alterações dinâmicas na página da web.

Primeiro, suponha que tenhamos duas variáveis.
dados()
retornar
ButtonBool: Verdadeiro,
cor vermelha"

E nós ligamos a variável "Buttonbool" com um elemento de botão no modelo.

Queremos alterar a cor de fundo de A, digamos, uma divisão com o clique do botão. Então, primeiro, crie uma div no modelo.

Esta é uma página de teste

Clique em mim!

Agora, vamos primeiro criar uma propriedade de relógios e alterar o estado da variável "cor" na mudança da variável "Buttonbool".

assistir:
ButtonBool ()
esse.cor = !esse.cor;

Tudo bem! A última etapa restante é mudar as classes da div na variável de mudança de cor. Então, vamos fazer isso usando o recurso de ligação da classe de Vue.JS.

Aqui, acabei de atribuir a classe "Red" se o estado da variável "cor" for verdadeiro, caso contrário "verde" se o estado da variável de cor for "falso", e a classe "caixa" for atribuída em qualquer caso.

O CSS para dar a largura, a altura e a cor do fundo da div é a seguinte.

Tudo bem, depois de terminar com as coisas de codificação, minha página da web seria assim.

Agora, sempre que clico no botão, a cor de fundo da caixa deve ser alterada.

E você pode testemunhar no GIF acima, a cor da div está mudando com o clique do botão. Isso é incrível, certo!

Então, é assim que podemos usar o Vue Watch para fazer interação dinâmica na página da web.

Conclusão

Neste post, tentamos alterar o estado de alguma variável no clique ou alteração de alguma outra variável usando a propriedade Watch de Vue.JS. Também fizemos algumas mudanças dinâmicas na página da web. Vimos que, com o clique do botão, no atributo no clique, alteramos o estado da variável e mostramos que a propriedade Watch assistia a variável e executou alguma ação como alterar algum estado de outra variável.