évenement - vue.js

Elément visible

HTML

// insérer dans le div de l'application
<div v-if="isVisible">Je suis un texte</div>

Script

  let app = Vue.createApp({
  data: function() {
    return {
      // mes variables
      isVisible: true //Affiche ou non
    }
  }
})

Evenements

Bouton afficheur

Cliquer sur le bouton affichera ou supprimera le message

HTML

<button v-on:click="isVisible = !isVisible">Show the message</button>
<!--   il est possible d'utiliser aussi l'attribut v-show qui ne supprimera pas dans le code mais simplement fera un "display:none"   -->
<div v-if="isVisible">Je suis un texte</div>
<!--   il est possible d'utiliser aussi l'attribut v-if-else  -->
<!--   il est possible d'utiliser aussi l'attribut v-else   -->

Script

  let app = Vue.createApp({
  data: function() {
    return {
      // mes variables
      isVisible: false //Affiche ou non
    }
  }
})

toggleBox Bouton (method)

Cliquer sur le bouton affichera ou supprimera le message en utilisant une methode : toggleBox

HTML

<div id="montage">
  <button @click="toggleBox">togglebox</button>
  <!-- @click.modifier.modifier : plusieur modifier existe - @click.right écoutera le click droit uniquement -->
  <!-- On peut chainer les modifier   -->
  <!--   il est possible d'utiliser aussi "@click = "v-on:click" -->
  <div v-if="isVisible">Affiche moi !</div>
</div>

Script

let app = Vue.createApp({
      data: function() {
        return {
          // ma variable
          variable: 'Hello world !',
          isVisible: false
        }
      }, // les méthodes sont hors de data
      methods: { //mes méthodes
          toggleBox() { // méthode toggleBox
            this.isVisible = !this.isVisible; //change la valeur de isVisible vers son opposé
          }
      }
    })

Keypress method

Appuyer sur la touche enter affichera un message dans la console

HTML

<input @keyup.enter="greet">
<!-- keyup.touchevoulue = "méthode désirée"  -->
<!-- keyup seul fonctionnera pour l'ensemble des touches   -->

Script

let app = Vue.createApp({
      data: function() {
        return {
          // ma variable
          variable: 'Hello world !',
        }
      }, // les méthodes sont hors de data
      methods: {
          greet(){
            // affiche la valeur contenue dans "variable"
            console.log(this.variable);
          }
      }
    })

Keypress method paramètre

Appuyer sur la touche enter affichera un message dans la console via un paramètre

HTML

<input @keyup.enter="greet(bonjour + '!!!!')">
<!-- greet(variable à passer comme paramètre + "concatenation") -->

Script

let app = Vue.createApp({
  data: function() {
    return {
      bonjour: "salut"
    }
  },
  methods: {
      //utilise la variable passé en paramètre bonjour: "salut" dans notre cas
      greet(parameter){
        console.log(parameter);
      }
  }
})