JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div id="app_A">
        <hr>
        <h2>1. Filtre de date</h2>

        <p>Affichez la valeur de la date saisie dans le champs ci-dessous, en utilisant un filtre qui formattera l'affichage de cette date en Français.<br>
        Par exemple, pour la date <code>04/11/1988</code>, le filtre formatera l'affichage en <code>Vendredi 4 Novembre 1988</code></p>

        <div class="form-group">
            <input type="date" class="form-control col-md-4" v-model="date"><br>
            <p>La date saisie est : {{date}}</p>
        </div>
    </div><!-- # Fin #app_A -->

    <div id="app_B">
        <hr>
        <h2>2. Filtre de devise</h2>
        
        <p>En fonction du nombre saisi dans le champs ci-dessous, affichez ce même nombre formatté en tant que devise.<br>
        Par exemple, pour la valeur <code>5</code>, le filtre formatera l'affichage en <code>5.00 €</code></p>

        <div class="form-group">
            <input type="number" class="form-control col-md-2" placeholder="5"><br>
            <p>Le prix saisi est de : <!-- Valeur du champs prix, formattée avec votre filtre Vue.js --></p>
        </div>
    </div><!-- Fin #app_B -->

JavaScript

new Vue({
	el : '#app_A',
  data : {
  	date : ''
  },
  filters : {
  	toDate : function(v) {
    	return new Date(v).toLocaleDateString('fr-FR', { weekday: 'long', year : 'numeric', month : 'numeric', day : 'numeric'});
    }
  }
})