recherche

Maison  >  Article  >  interface Web  >  Comment ajouter des styles aux éléments dans vue

Comment ajouter des styles aux éléments dans vue

青灯夜游
青灯夜游original
2023-01-12 18:10:392559parcourir

Méthode Add : 1. Utilisez l'instruction ":class="['class name']" pour ajouter ; 2. Utilisez ":class="['class name 1','class name 2',{attribute name(class name) ):'Valeur d'attribut (vrai ou faux)}]"" ; 3. Utilisez l'instruction ":class="{Nom d'attribut (nom de classe):true}" ; 4. Utilisez ":style="{' style name' :'style value'}"" instruction ; 5. Utilisez l'instruction ":style="style"" pour ajouter ;

Comment ajouter des styles aux éléments dans vue

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Ajouter des styles dans vue

1. Utilisez le style de classe :

Le nom de la classe doit être mis entre guillemets

1. 2 , dans le Array Utilisez des expressions ternales

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>
3. la forme de :style 

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,表达式?&#39;类名3&#39;:&#39;&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>
2 Définissez l'objet de style dans les données et référencez-le à :style 

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,{属性名(类名):&#39;属性值(true或false)}]">这种方法  需要用  v-bind: => :  绑定</h1>
3 Via un tableau dans :style, référencez les objets de style sur plusieurs données ;

<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法  需要用  v-bind: => :  绑定</h1>
. Exemple de code : 
<h1 :style = "{&#39;样式名&#39;:&#39;样式值&#39;}">这种方法  需要用  v-bind: => :  绑定</h1>

(Partage de vidéos d'apprentissage :

Tutoriel d'introduction à vuejs, Vidéo de programmation de base

)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

class 对象
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelles sont les fonctionnalités es6 utilisées dans vue ?Article suivant：Quelles sont les fonctionnalités es6 utilisées dans vue ?

Articles Liés

Voir plus