Vue.JS muda o estilo
Vue.JS é usado para criar interfaces de usuário (UIS) e aplicativos de uma página única (spas). É fácil aprender a usar vue.JS e a estrutura de liberdade e conforto que estão disponíveis durante o desenvolvimento de aplicativos neste programa porque possui os melhores recursos de Angular e ReactJs. É por isso que é conhecido por sua codificação fácil de usar e limpa.
Vue.JS fornece ligação ao estilo que você pode usar para alterar o estilo dinamicamente. Você pode vincular uma variável ao atributo de estilo em qualquer tag html e alterar o estilo quando a variável ligada é alterada. Neste artigo, veremos como usar a ligação ao estilo e alterar o estilo de variáveis usando o VUE.JS.
Encadernação do estilo embutido
Em vue.JS, podemos vincular variáveis a atributos de estilo usando diretivas V-Bind.
Sintaxe do objeto
Assim como no estilo CSS embutido, também podemos fazer um estilo embutido em vue.JS usando a diretiva em V-Bind e os braços encaracolados sintaxe. Você pode vincular qualquer variável ao atributo de estilo usando o seguinte script:
E, na tag e dados do script:
Ata ()retornar
Colorvar: 'vermelho',
Fontsize: 14
Também podemos retirar o objeto aos dados e vincular esse objeto com o atributo de estilo para fazer com que nosso HTML pareça mais limpo da seguinte maneira:
dados()retornar
StyleObject:
Colorvar: 'vermelho',
Fontsize: 14
Agora, vincularemos a variável "StyleObject" ao atributo de estilo da seguinte maneira:
Sintaxe da matriz
Vue.O JS também oferece a opção de vincular várias variáveis na sintaxe da matriz à tag HTML única, como segue:
Valores múltiplos
Da mesma forma, também podemos fornecer vários valores usando a sintaxe da matriz a uma propriedade CSS dentro da ligação em linha, como segue:
Essas são algumas das diferentes maneiras que podemos usar para vincular variáveis com o atributo de estilo para alterar dinamicamente o estilo de uma página da web.
Resumo
Este artigo cobriu a sintaxe para o estilo de ligação em linha. Você também aprendeu sobre a sintaxe do objeto e a sintaxe da matriz usada para vincular os valores ou variáveis aos atributos de estilo em Vue.JS. Se este artigo se mostrou útil para lhe dar uma melhor compreensão de Vue.JS, fique à vontade para continuar lendo no Linuxhint.com um conteúdo mais útil.