Vue.style de changement js
Vue.JS est utilisé pour créer des interfaces utilisateur (UIS) et des applications à une seule page (spas). Il est facile d'apprendre à utiliser Vue.JS et le cadre de liberté et de confort qui est disponible tout en développant des applications dans ce programme car il a les caractéristiques les mieux combinées d'Angular et ReactJS. C'est pourquoi il est connu pour son codage facile à utiliser et propre.
Vue.JS fournit une reliure de style que vous pouvez utiliser pour modifier le style dynamiquement. Vous pouvez lier une variable à l'attribut de style dans n'importe quelle balise HTML et modifier le style lorsque la variable liée est modifiée. Dans cet article, nous allons voir comment utiliser la liaison du style et changer le style des variables à l'aide de Vue.js.
Liaison de style en ligne
En Vue.JS, nous pouvons lier les variables aux attributs de style à l'aide de directives de la banquette en V.
Syntaxe d'objet
Tout comme avec le style CSS en ligne, nous pouvons également faire du style en ligne dans Vue.JS utilisant la directive V-Bind et la syntaxe objet des accolades bouclées. Vous pouvez lier n'importe quelle variable à l'attribut de style à l'aide du script suivant:
Et, dans la balise et les données de script:
à()retour
Colorvar: «rouge»,
Fontsize: 14
Nous pouvons également ramener l'objet aux données et lier cet objet avec l'attribut de style pour rendre notre HTML plus propre comme suit:
données()retour
StyleObject:
Colorvar: «rouge»,
Fontsize: 14
Maintenant, nous lierons la variable «styleObject» à l'attribut de style comme suit:
Syntaxe de la table
Vue.JS fournit également la possibilité de lier plusieurs variables dans la syntaxe du tableau à la balise HTML unique, comme suit:
Plusieurs valeurs
De même, nous pouvons également donner plusieurs valeurs en utilisant la syntaxe du tableau sur une propriété CSS dans la liaison en ligne, comme suit:
Ce sont quelques-unes des différentes façons que nous pouvons utiliser pour les variables de liaison avec l'attribut de style pour modifier dynamiquement le style d'une page Web.
Résumé
Cet article a couvert la syntaxe pour la liaison du style en ligne. Vous avez également appris la syntaxe d'objet et la syntaxe du tableau utilisé pour lier les valeurs ou variables aux attributs de style dans Vue.js. Si cet article s'est avéré utile pour vous donner une meilleure compréhension de Vue.JS, n'hésitez pas à continuer à lire à Linuxhint.com pour un contenu plus utile.