Was bedeutet v-bind in vue.js?

[v-bind] wird in vue.js verwendet, um mehrere Attributwerte zu binden oder Requisitenwerte wie eine Komponente zu erstellen. [v-bind] verfügt über einen entsprechenden syntaktischen Zucker, der eine Abkürzung darstellt, die prägnant ist Syntax.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

Einführung in v-bind

Die Hauptfunktion der Anweisungen, die wir zuvor gelernt haben, besteht darin, Werte in den Inhalt unserer Vorlage einzufügen.

Aber zusätzlich zu den Inhalten, die dynamisch bestimmt werden müssen, möchten wir auch bestimmte Attribute dynamisch binden.

• Zum Beispiel das href-Attribut des a-Elements dynamisch binden

• Zum Beispiel das src-Attribut des img-Elements dynamisch binden

Zu diesem Zeitpunkt können wir v-bind verwenden, um Folgendes anzugeben:

• Funktion: dynamisches Bindungsattribut

• Abkürzung:

• Erwartet: beliebig (mit Argument) |. Objekt (ohne Argument)

• Parameter: attrOrProp (Option)

v -Bind-Grundlagen

v-bind Wird verwendet, um mehrere Attributwerte zu binden oder Requisitenwerte wie eine Komponente zu erstellen (wir werden dies vorstellen, wenn wir etwas über Komponenten lernen).

Welche Attribute müssen in der Entwicklung dynamisch gebunden werden?

Zum Beispiel Links zu Bildern (src), Links zu Websites (href), dynamische Bindung einiger Klassen, Stile usw.

Zum Beispiel Binden von src und href von Elementen über Daten in der Vue-Instanz, Code Wie folgt

<div id="app">
    <a v-bind:href="link">Vuejs官网</a>
    <img v-bind:src="logoUrl" alt=""/>
    
    <!-- 当然也可以通过语法糖“:”缩写v-bind -->
    <!-- <img :src="logoUrl" alt=""/> -->
</div>
<script src="/vue.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            logoUrl:"http://vuejs.org/images/logo.png",
            link:"https://vuejs.org"
        }
    })
</script>

V-Bind-Syntaxzucker

V-Bind hat einen entsprechenden Syntaxzucker, der eine Abkürzung ist

In der Entwicklung verwenden wir normalerweise die Syntaxzuckerform, weil sie prägnanter ist.

Die Abkürzung lautet wie folgt:

<div id="app">
    <a :href="link">Vuejs官网</a>
    <img :src="logoUrl" alt=""/>
</div>

v-bind-Bindungsklasse

Oft möchten wir die Klasse dynamisch wechseln, z. B.:

• Wenn sich die Daten in einem bestimmten Zustand befinden, wird die Schriftart angezeigt in rot.

• Wenn sich die Daten in einem anderen Zustand befinden, erscheint die Schrift schwarz.

Es gibt zwei Möglichkeiten, Klassen zu binden:

• Objektsyntax

• Array-Syntax

Die Bedeutung der Objektsyntax ist: Klasse gefolgt von einem Objekt.

Objektsyntax hat die folgenden Verwendungen:

用法一：直接通过{}绑定一个类
<h2 :class="{active:isActive}">Hello world</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{active:isActive,line:isLine}">Hello world</2>  
用法三：和普通的类同时存在，并不冲突
注：如果isActive和IsLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{active:isActive,line:isLine}">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo: Klicken Sie auf die Schaltfläche, um die Schriftfarbe zu ändern

...
<style>
    .active{
        color:red;
    }    
</style
...
<div id="app">
<h1 v-bind:class="{active:isActive}">{{message}}</h1>
<button v-on:click="buttonClick()">颜色切换</button>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;hello world&#39;,
isActive:true
},
methods:{
buttonClick:function(){
this.isActive = !this.isActive;
}
}
})
</script>

Die Bedeutung der Array-Syntax ist: Auf die Klasse folgt ein Array.

Array-Syntax hat die folgenden Verwendungszwecke (Array-Syntax wird im Allgemeinen weniger verwendet):

用法一：直接通过[]绑定一个类
<h2 :class="[active]">Hello world</h2>
用法二：也可以传入多个值
<h2 :class="[active,line]">Hello world</2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class="[active,line]">Hello world</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello world</h2>

Demo:

... 
<style>
.active{
color: red;
}
.line{
font-size: 50px;
}
.common{
color:green;
}
</style>
...
<div id="app">
    <!-- 如果加了单引号用的就是style中的指定class，如果没有单引号用的就是vue对象中的active变量 -->
    <!-- 注：这里，下面三个类将共存-->
<h2 class="common" :class="[&#39;active&#39;,line]">Hello world</h2>
</div>
<script>
const vue = new Vue({
el: &#39;#app&#39;,
data: {
line:&#39;line&#39;
}
})
</script>

v-bind-Bindungsstil

Wir können v-bind:style verwenden, um einige CSS inline zu binden Stile

Beim Schreiben von CSS-Eigenschaftsnamen, wie z. B. „font-size“

• , können wir „cameCase: fontSize“ oder „durch Bindestriche getrennt“ verwenden (Kebab-Fall, denken Sie daran, Single (in Anführungszeichen) zu verwenden)'font-size '

• Es gibt zwei Möglichkeiten, eine Klasse zu binden:

Object syntax

• array syntax Die Bedeutung der Array-Syntax besteht darin, dass auf den Stil ein Array-Typ folgt

Das obige ist der detaillierte Inhalt vonWas bedeutet v-bind in vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!