Retourner à la page d'accueil de TJS

Script vue1 : Introduction à Vue.js

Edition 2 | Chapitre 24 : Bibliothèques et frameworks / Page 351

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Premiers exemples avec Vue.js</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <h1>Notre première page avec Vue.js</h1>        <h2 id="divSalut">{{ salutation }} !</h2><div id="divHeure">  Votre navigateur indique qu'il est exactement :   <b>{{ horloge }}</b></div><h3 id="divAppetit" v-if="midi">Bon appétit</h3><h2>Liste de crypto-monnaies</h2><div id="divCoin">  <button v-on:click="inverser">Inverser l'ordre</button>  <ol>    <li v-for="crypto in cryptos">     <b>{{ crypto.code }}</b> {{ crypto.name }}     </li>  </ol> </div><script type="text/javascript">  var dt=new Date();  /*  Retourne l'heure au format HH:MM:SS */  function getHorloge(dt) {    var h=dt.getHours(), m=dt.getMinutes(), s=dt.getSeconds();    h = (h<10?"0":"") + h;    m = (m<10?"0":"") + m;    s = (s<10?"0":"") + s;        return h+":"+m+":"+s;  }    /* Retourne la bonne salutation selon l'heure de la journée */  function getSalutation(dt) {    var h=dt.getHours()    if (h<5)  return "Bonne nuit";      if (h<14) return "Bonjour";      if (h<19) return "Bon après-midi";      return "Bonsoir";       }      /* Liste de monnaies */  var coins = [    {name: "Bitcoin",  code: "BTC"},    {name: "Ethereum Classic", code: "ETC"},    {name: "Ethereum", code: "ETH"},    {name: "Monero",   code: "XMR"},  ];  console.log(coins);        /* Création des objets Vue */   var salut = new Vue({    el: "#divSalut",    data: {      salutation: getSalutation(dt)    }  });    var heure = new Vue({    el: "#divHeure",    data: {      horloge: getHorloge(dt)    }    });    var appetit = new Vue({    el: "#divAppetit",    data: {      midi: dt.getHours()==12    }  });    var liste = new Vue({    el: "#divCoin",    data: {      cryptos: coins    },    methods: {      inverser: function() {        this.cryptos.reverse();      }     }  });      /* Mise à jour régulière de la variable horloge */  setInterval(function() {    dt = new Date();      heure.horloge = getHorloge(dt);  }, 500);              </script></body>

Nouvelle édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 21 octobre

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 24/07/2021 22:36:54 sur php7 en 87.51 ms