Maison > Article > interface Web > Analyse des cas d'utilisation de la directive V-bind dans VueJs
Cette fois, je vais vous apporter une analyse des cas d'utilisation de l'instruction V-bind dans VueJs. Quelles sont les précautions lors de l'utilisation de l'instruction V-bind dans VueJs. Ce qui suit est un cas pratique. , jetons un coup d'oeil.
Introduction
v-bind est principalement utilisé pour la liaison d'attributs Vue fournit officiellement une abréviation : bind, par exemple :
<.><!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
1. Présentation
v-bind est principalement utilisé pour la liaison d'attributs, tels que votre attribut de classe, votre attribut de style, votre attribut de valeur, vos propriétés href , etc., tant qu'il s'agit de propriétés, elles peuvent être liées à l'aide de la directive v-bind. Exemple :<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <p :class="{ red: isRed }"></p> <p :class="[classA, classB]"></p> <p :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <p :style="{ fontSize: size + 'px' }"></p> <p :style="[styleObjectA, styleObjectB]"></p> <!-- 绑定一个有属性的对象 --> <p v-bind="{ id: someProp, 'other-attr': otherProp }"></p> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <p v-bind:text-content.prop="text"></p> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
2. Liaison de classe HTML
Syntaxe d'objet Nous Vous peut transmettre un objet à v-bind:class pour changer dynamiquement de classe<p v-bind:class="{ active: isActive }"></p>La syntaxe ci-dessus indique active. L'existence ou non de cette classe dépendra de la véracité de l'attribut de données isActive
<.> vous Vous pouvez transmettre plus d'attributs dans l'objet pour basculer dynamiquement entre plusieurs classes. De plus, la directive v-bind:class peut également coexister avec l'attribut class normal. Lorsqu'il existe le modèle suivant :
Le résultat est rendu comme suit :<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </p> 和如下 data data: { isActive: true, hasError: false }Lorsque isActive ou hasError change, la liste des classes sera mise à jour en conséquence. Par exemple, si la valeur de hasError est vraie, la liste de classes deviendra "static active text-danger"
<p class="static active"></p>
L'objet de données lié n'a pas besoin d'être défini en ligne dans le modèle
Rendu Le résultat est le même que ci-dessus. Nous pouvons également lier ici une propriété calculée de l'objet renvoyé. Il s'agit d'un modèle courant et puissant :<p v-bind:class="classObject"></p> data: { classObject: { active: true, 'text-danger': false } }
<p v-bind:class="classObject"></p> data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }
Syntaxe du tableau Nous pouvons transmettre un tableau à v-bind:class , à appliquer une liste de classes
rendue comme :<p v-bind:class="[activeClass, errorClass]"></p> data: { activeClass: 'active', errorClass: 'text-danger' }Si vous souhaitez également changer les classes dans la liste en fonction de conditions, vous pouvez utiliser l'expression ternaire
<p class="active text-danger"></p>Écrire de cette façon ajoutera toujours errorClass, mais n'ajoutera activeClass que lorsque isActive est vrai.
<p v-bind:class="[isActive ? activeClass : '', errorClass]"></p>
Cependant, c'est un peu fastidieux d'écrire ainsi lorsqu'il y a plusieurs classes conditionnelles. Par conséquent, la syntaxe des objets peut également être utilisée dans la syntaxe des tableaux
<p v-bind:class="[{ active: isActive }, errorClass]"></p>
3. Utilisée sur les composants Lorsqu'elle est utilisée dans un self
Lors de la définition d'un composantà l'aide de l'attribut class, ces classes seront ajoutées à l'élément racine du composant. Les classes qui existent déjà sur cet élément ne seront pas écrasées. Par exemple, si vous déclarez ce composant :
puis ajoutez une classe lors de son utilisationVue.component('my-component', { template: '<p class="foo bar">Hi</p>' })le HTML sera rendu comme :
<my-component class="baz boo"></my-component>La même chose s'applique à la
<p class="foo bar baz boo">Hi</p>liaison de données Lorsque isActive est véridique, le HTML sera rendu comme
<my-component v-bind:class="{ active: isActive }"></my-component>
<p class="foo bar active">Hi</p>
4. Lier les styles en ligne Syntaxe d'objet
La syntaxe d'objet de v-bind:style est très intuitive - elle ressemble beaucoup à CSS, mais en réalité un objet
JavaScript. Les noms de propriétés CSS peuvent être nommés en utilisant camelCase ou kebab-case (n'oubliez pas de les mettre entre guillemets simples) :
Il est généralement préférable de se lier directement à un objet de style. Cela rendra le modèle plus clair. 🎜><p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p> data: { activeColor: 'red', fontSize: 30 }
De même, la syntaxe des objets est souvent utilisée en conjonction avec les propriétés calculées de l'objet renvoyé
<p v-bind:style="styleObject"></p> data: { styleObject: { color: 'red', fontSize: '13px' } }Syntaxe du tableau
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:<p v-bind:style="[baseStyles, overridingStyles]"></p>
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!