<!-- archivo index.html -->

<!DOCTYPE html>
<html lang="es">
  <head>
      <title>index.html</title>
    </head>
  <body>
    <div id="app">
      <btn-hola></btn-hola>
      <btn-hola></btn-hola>
      <btn-hola></btn-hola>
    </div>
    <!-- carga de la librerķa Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      Vue.component('btn-hola', {
        data: function() {
          return {
            muestra: false
          }
        },
        template: `
          <div>
            <button v-on:click="muestra = !muestra">
              {{ muestra ? "Ocultar" : "Mostrar" }}
            </button>
            <span v-show="muestra">Hola a todos</span>
          </div>
        `
        })

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