Analyse von Anwendungsfällen der V-Bind-Direktive in VueJs

Dieses Mal werde ich die Anwendungsfälle der V-Bind-Anweisung in VueJs analysieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung der V-Bind-Anweisung in VueJs? , lass uns einen Blick darauf werfen.

Einführung

Vue bietet offiziell eine Abkürzung: bind, zum Beispiel:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

1. Übersicht

v-bind wird hauptsächlich für die Attributbindung verwendet, z. B. Ihr Klassenattribut, Stilattribut, Wertattribut, href-Attribut usw . Usw., solange es sich um ein Attribut handelt, kann es mit der v-bind-Direktive gebunden werden.

Beispiel:

<!-- 绑定一个属性 -->
<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. Bindungs-HTML-Klasse

Objektsyntax

Wir können Give übergeben v-bind:class ein Objekt zum dynamischen Wechseln der Klasse

<p v-bind:class="{ active: isActive }"></p>

Die obige Syntax zeigt an, ob diese Klasse aktiv ist oder nicht, hängt von der Wahrheit des Datenattributs isActive

Sie können in der Objekt Übergeben Sie weitere Attribute, um dynamisch zwischen mehreren Klassen zu wechseln. Darüber hinaus kann die Direktive v-bind:class auch mit dem normalen Klassenattribut koexistieren. Wenn die folgende Vorlage vorhanden ist:

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>
  和如下 data
data: {
 isActive: true,
 hasError: false
}

Das Ergebnis wird wie folgt gerendert:

<p class="static active"></p>

Wenn sich isActive oder hasError ändert, wird die Klassenliste entsprechend aktualisiert. Wenn beispielsweise der Wert von hasError true ist, wird die Klassenliste zu „static active text-danger“

Das gebundene Datenobjekt muss nicht inline in der Vorlage definiert werden

<p v-bind:class="classObject"></p>
data: {
 classObject: {
 active: true,
 'text-danger': false
 }
}

Das gerenderte Ergebnis und dasselbe wie oben. Wir können hier auch eine berechnete Eigenschaft des zurückgegebenen Objekts binden. Dies ist ein häufiges und leistungsstarkes Muster:

<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'
 }
 }
}

Array-Syntax

Wir können ein Array an v-bind:class übergeben, um eine Klasse anzuwenden Listen Sie

<p v-bind:class="[activeClass, errorClass]"></p>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

auf und rendern Sie es als:

<p class="active text-danger"></p>

Wenn Sie die Klassen in der Liste auch basierend auf Bedingungen wechseln möchten, können Sie den ternären -Ausdruck

verwenden

<p v-bind:class="[isActive ? activeClass : &#39;&#39;, errorClass]"></p>

Wenn Sie so schreiben, wird immer errorClass hinzugefügt, aber nur activeClass, wenn isActive wahr ist.

Allerdings ist es etwas umständlich, so zu schreiben, wenn mehrere bedingte Klassen vorhanden sind. Daher kann die Objektsyntax auch in der Array-Syntax verwendet werden

<p v-bind:class="[{ active: isActive }, errorClass]"></p>

3. Wird für Komponenten verwendet

Bei Verwendung in einer benutzerdefinierten -Komponente Wenn Sie das Klassenattribut für verwenden, werden diese Klassen dem Stammelement der Komponente hinzugefügt. Klassen, die bereits auf diesem Element vorhanden sind, werden nicht überschrieben.

Wenn Sie beispielsweise diese Komponente deklarieren:

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

und dann bei der Verwendung eine Klasse

<my-component class="baz boo"></my-component>

hinzufügen, wird der HTML-Code wie folgt gerendert:

<p class="foo bar baz boo">Hi</p>

Das Gleiche gilt für die Datenbindung-Klasse

<my-component v-bind:class="{ active: isActive }"></my-component>

Wenn isActive true ist, wird HTML als

<p class="foo bar active">Hi</p>

gerendert. 4. Bindung inline definieren style

Objektsyntax

Die Objektsyntax von v-bind:style ist sehr intuitiv – sie sieht sehr nach CSS aus, ist aber eigentlich ein JavaScript--Objekt . CSS-Eigenschaftsnamen können mit „camelCase“ oder „kebab-case“ benannt werden (denken Sie daran, sie in einfache Anführungszeichen zu setzen):

<p v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></p>
data: {
 activeColor: 'red',
 fontSize: 30
}

Normalerweise ist es besser, direkt an ein Stilobjekt zu binden, was die Vorlage klarer macht

<p v-bind:style="styleObject"></p>
data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

Ebenso wird die Objektsyntax häufig in Verbindung mit den berechneten Eigenschaften des zurückgegebenen Objekts verwendet

Array-Syntax

   v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

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

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

推荐阅读：

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

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

Das obige ist der detaillierte Inhalt vonAnalyse von Anwendungsfällen der V-Bind-Direktive in VueJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!