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="&#39;/path/to/images/&#39; + fileName">
<!-- class 绑定 -->
<p :class="{ red: isRed }"></p>
<p :class="[classA, classB]"></p>
<p :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<p :style="{ fontSize: size + &#39;px&#39; }"></p>
<p :style="[styleObjectA, styleObjectB]"></p>
<!-- 绑定一个有属性的对象 -->
<p v-bind="{ id: someProp, &#39;other-attr&#39;: 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, &#39;text-danger&#39;: 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 : &#39;&#39;, 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 utilisation

Vue.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

classe

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 + &#39;px&#39; }"></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 的数组语法可以将多个样式对象应用到同一个元素上

<p v-bind:style="[baseStyles, overridingStyles]"></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用JS判断字符串中包含内容方法总结

JS+HTML5实绑定鼠标事件的粒子动画

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!