Liaison d’attribut

5 minutes

Vous avez déjà étudié comment afficher des données sur une page à l’aide d’accolades doubles ({{}}). Toutefois, le texte sur la page n’est pas la seule partie qui peut devoir être dynamique.

Vous définissez un grand nombre de ces valeurs sur une page à l’aide d’attributs. Heureusement, Vue.js vous permet d’établir une liaison avec des attributs via des directives.

Directives

Les directives sont des attributs que Vue.js reconnaît. Elles vous permettent de définir dynamiquement les valeurs des attributs HTML. Toutes les directives commencent par v-.

v-bind

La directive principale est v-bind. Elle vous permet de lier une valeur de données à un attribut. Vous pouvez l’utiliser pour définir dynamiquement le nom d’une classe, la source d’une image ou un style.

Pour utiliser cette directive, placez v-bind et un caractère deux-points (:) devant l’attribut que vous souhaitez définir. Par conséquent, pour définir l’attribut src d’une image, vous devez utiliser v-bind:src="value". La valeur de l’attribut est ensuite évaluée de la même façon qu’elle est évaluée lorsque vous utilisez la syntaxe {{ }}.

Le code suivant génère l’élément HTML <img src="./media/sample.jpg">.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSource: './media/sample.jpg'
            }
        }
    }).mount('#app');
</script>

La propriété imageSource est disponible pour le modèle, car elle est retournée à partir de la méthode data(). Ensuite, elle est liée à l’attribut src de l’élément image.

Notes

Vous n’avez pas besoin de conserver une référence à l’objet que vous utilisez pour votre application. Mais vous pouvez appeler createApp immédiatement, suivi de mount, comme vous l’avez vu précédemment.

Format abrégé des liaisons

Vous avez maintenant vu comment utiliser la directive v-bind dans votre application Vue pour lier des données à un attribut. Vous pouvez également taper cette directive en abrégé. Par exemple, au lieu de taper v-bind:attribute, vous pouvez taper :attribute. Ce format abrégé économise quelques caractères.

Dans l’exemple de source de l’image liée, vous pouvez utiliser la forme abrégée de la façon suivante.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

Vous pouvez maintenant taper le code suivant.

<div id="app">
    <img :src="imageSource" />
</div>

Conseil

L’utilisation de la syntaxe abrégée :attribute est généralement considérée comme une meilleure pratique que l’utilisation de v-bind:attribute.

Classe et style

L’un des attributs les plus courants que vous pouvez définir pour un élément HTML est son attribut class ou style. Pour établir une liaison avec ces attributs, vous pouvez utiliser v-bind:class et v-bind:style. Ou en abrégé, vous pouvez utiliser :class et :style.

Objets de classe

Supposons que vous avez une application possédant deux classes : centered et active. En HTML, voici comment vous pouvez utiliser ces classes.

<div class='centered active'>Hello, Vue!</div>

Toutefois, cet exemple est statique. Si vous voulez être en mesure de modifier les données, vous pouvez utiliser une liaison. Vue autorise la liaison non seulement pour une chaîne, mais aussi pour un objet.

Voici comment vous pouvez extraire la valeur statique centered active pour une autre propriété :

<div id="app">
    <div :class="classObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                classObject: {
                    centered: true,
                    active: true
                }
            }
        }
    }).mount('#app');
</script>

La propriété de données classObject a deux propriétés dont les valeurs sont booléennes. Les valeurs booléennes vous permettent d’activer et de désactiver des classes spécifiques. La définition de centered sur false rendrait <div class="active">, car active serait la seule propriété encore égale à true.

Notes

Les règles d’appellation JavaScript s’appliquent aux objets de classe. Par conséquent, si le nom de votre classe utilise un tiret, tel que center-text, placez le nom entre guillemets ('center-text': true) lorsque vous ajoutez la propriété.

Objets de style

La définition de styles dans CSS implique la création de collections de paires clé/valeur. Le fait de représenter le style à l’aide d’un objet JavaScript est relativement naturel. Dans Vue.js, vous pouvez créer des objets de style pour définir le style.

Par exemple, pour définir la couleur d’arrière-plan (background-color) du style d’un élément HTML, vous pouvez utiliser le code suivant.

<div id="app">
    <div :style="styleObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                styleObject: {
                    'background-color': 'red'
                }
            }
        }
    }).mount('#app');
</script>

Continuer