Que signifie v-bind dans vue.js

[v-bind] dans vue.js est utilisé pour lier plusieurs valeurs d'attribut, ou créer des valeurs d'accessoires comme un composant [v-bind] a un sucre de syntaxe correspondant, qui est une abréviation. ce qui favorise une syntaxe concise.

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Introduction à v-bind

Nous avons appris plus tôt La fonction principale de la directive est d'insérer des valeurs dans le contenu de notre modèle.

Cependant, en plus du contenu devant être déterminé dynamiquement, nous souhaitons également lier certains attributs de manière dynamique.

• Par exemple, lier dynamiquement l'attribut href de l'élément a

• Par exemple, lier dynamiquement l'attribut src de l'élément img

À ce stade, nous pouvons utiliser v-bind pour spécifier :

• Fonction : lier dynamiquement les attributs

• Abréviation : 

• Attendu : any(with argument) | object (sans argument)

• Paramètres : attrOrProp(option)

Bases de v-bind

v-bind est utilisé pour lier plusieurs valeurs d'attribut ou créer des valeurs d'accessoires comme un composant (nous présenterons ceci lorsque nous en apprenons davantage sur les composants)

En développement, quels attributs doivent être liés dynamiquement ?

Par exemple, des liens vers des images (src), des liens vers des sites Web (href), une liaison dynamique de certaines classes, styles, etc.

Par exemple, une liaison via des données dans une instance Vue Pour déterminer le src et le href de l'élément, le code est le suivant

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

sucre de syntaxe v-bind

v-bind a un sucre de syntaxe correspondant, qui est l'abréviation

En développement, nous utilisons généralement la forme de sucre syntaxique car elle est plus concise.

L'abréviation est la suivante :

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

Classe de liaison v-bind

Souvent, nous souhaitons changer de classe de manière dynamique, par exemple :

• Lorsque les données sont dans un certain état, la police s'affiche en rouge.

• Lorsque les données sont dans un autre état, la police apparaît en noir.

Il existe deux façons de lier des classes :

• Syntaxe d'objet

• Syntaxe de tableau

La signification de la syntaxe des objets est : classe suivie d'un objet.

La syntaxe de l'objet a l'utilisation suivante :

用法一：直接通过{}绑定一个类
<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>

Démo : cliquez sur le bouton pour changer la couleur de la police

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

La signification de la syntaxe du tableau est : classe est suivi d'un tableau.

La syntaxe de tableau a les utilisations suivantes (la syntaxe de tableau est généralement utilisée moins souvent) :

用法一：直接通过[]绑定一个类
<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>

Démo :

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

Style de liaison v-bind

Nous pouvons utiliser v-bind:style pour lier certains styles CSS en ligne

Lors de l'écriture de noms d'attributs CSS, tels que font-size

• Nous pouvons utiliser cameCase : fontSize

• ou séparés par des tirets (kebab-case, pensez à utiliser des guillemets simples) 'font-size'

Il existe deux façons de lier une classe :

• Syntaxe d'objet

• Syntaxe de tableau

La signification de la syntaxe d'objet est le style suivi d'un type d'objet

<!-- 对象key是CSS属性名称 -->
<!-- 对象value是具体赋的值，值可以来自于data中的属性 -->
:style="{coloc:currentColor,fontsize:fontsize+&#39;px&#39;}"

La signification de la syntaxe du tableau est le style Il est suivi d'un type de tableau

<!-- 多个值以，分割即可-->
<div v-bind:style="[baseStyles,overridingStyles]"></div>

Démo :

<div id="app">
<!-- 通过对象绑定style行内样式，值如果为字符串，那么将直接显示样式值 -->
<!-- <h1 :style="{color:&#39;red&#39;}">{{message}}</h1> -->
<!-- 通过变量来绑定行内样式表 -->
<!-- <h1 :style="{color:color}">{{message}}</h1> -->
<!-- 通过方法来绑定样式 -->
<!-- <h1 :style="getStyle()">{{message}}</h1> -->
<!-- 通过数组来绑定样式 -->
<h1 :style="[common,bgColor]">{{message}}</h1>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
message: "hello world",
color: &#39;red&#39;,
common:{color:&#39;blue&#39;,fontSize:&#39;10px&#39;},
bgColor:{backgroundColor:&#39;black&#39;}
},
methods: {
getStyle: function() {
return {
color: this.color
};
}
}
})
</script>

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

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!