<!-- fichier index.html -->

<!DOCTYPE html>
<html lang="fr">
  <head>
      <title>index.html</title>
    </head>
  <body>
    <div id="app">
      <btn-bonjour></btn-bonjour>
      <btn-bonjour></btn-bonjour>
      <btn-bonjour></btn-bonjour>
    </div>
    <!-- chargement de la librairie Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      Vue.component('btn-bonjour', {
        data: function() {
          return {
            affiche: false
          }
        },
        template: `
          <div>
            <button v-on:click="affiche = !affiche">
              {{ affiche ? "Cacher" : "Afficher" }}
            </button>
            <span v-show="affiche">Bonjour tout le monde !</span>
          </div>
        `
        })

      let vm = new Vue({
        el: "#app",
      });
    </script>
    
  </body>
</html>