VueJS : V-bind

Nous allons aujourd'hui aborder la Directive v-bind qui mérite un article à lui seul. La Directive v-bind permet de lier dynamiquement un ou plusieurs attributs de notre élément HTML à une expression - Data ou Method par exemple.

Si la directive est utilisée pour lier un attribut 'class' ou 'style', nous pouvons utiliser dans notre expression une Array ou un Object.

Si cette explication vous paraît floue, je vous invite à vous familiariser avec les exemples ci-dessous et de revenir à cette définition un peu plus tard.

Nous allons utiliser dans cet article la notation abrégée de la directive 'v-bind' qui est ':' suivi de l'attribut.

Vous pouvez retrouver la Documentation ici 📗

<section id="app">
    <!-- Nous lions l'attribut 'src' -->
    <img :src="cat" />
    <!-- src='./img/cat.jpg' -->

    <!-- Nous lions l'attribut class - Nous pouvons utiliser une Array -->
    <p :class="[blue, uppercase]">
    Dis is my cat 😸
    </p>
    <!-- class="blue--background uppercase" -->

    <!-- Nous lions l'attribut style - Nous pouvons utiliser un Object-->
    <p :style="{backgroundColor: 'palevioletred'}">
     Be careful, he is danzerous 😼
    </p>
    <!-- style="background-color: palevioletred;" -->
</section>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      cat: './img/cat.jpg',
      blue: 'blue--background',
      uppercase: 'uppercase'
    }
  });
</script>

<style>
  .blue--background {
    background-color: aqua
  }

  .uppercase {
    text-transform: uppercase
  }
</style>

Dans les prochains exemples, nous allons utiliser les styles suivants :

<script>
  var app = new Vue({
    el: "#app",
    data: {
      isOn: true,
      bgColor: 'blue--background',
      uppercaseStyle: 'uppercase'
    }
  });
</script>

<style>
.blue--background {

  background-color: aqua
}

.red--background {
  background-color: palevioletred
}

.uppercase {
  text-transform: uppercase
}
</style>

Lier un attribut à une seule expression

Il est possible de lier un attribut à une seule expression. Pour ça, nous avons juste besoin de préciser notre expression dans notre attribut.

  <!-- Notre class est lié par v-bind, nous appliquons la class blue--background -->
  <p :class="bgColor">
    Hello, Blue World
  </p>

Lier une class à un v-bind avec une expression de type Object

Si notre attribut est une class ou un style, il est possible d'utiliser un Object dans notre expression.

  <!-- Si 'isOn' === true, alors nous appliquons la class 'blue--background' -->
  <p :class="{'red--background' : isOn}">
    Hello, Red World
  </p>

Lier une class à un v-bind avec une expression de type Array

Si notre attribut est une class ou un style, il est possible d'utiliser un Array dans notre expression.

<!-- Nous appliquons deux expressions dans notre attribut class, via une Array-->
  <p :class="[bgColor, uppercaseStyle]">
    hello, blue uppercase
  </p>

Exercice

En reprenant le modèle ci-dessous :

Changer la couleur du background en black quand l'utilisateur clique sur le bouton 'Éteindre la lumière'
Si le background est black, changer la couleur du background en white quand l'utilisateur clique sur le bouton 'Éteindre la lumière'

Pour effectuer cet exercice, nous allons avoir besoin de la Directive 'v-on'

Résultat attendu :

Florian ARGAUD's blog 🔥