Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP 2

    Transféré par

    fedi zran
    25 vues7 pages

    Titre original

    tp 2

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    25 vues7 pages

    TP 2

    Transféré par

    fedi zran

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    Ex1 :

    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calcul de la somme</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>

    <body>

    <div id="app">

    <input type="number" v-model.number="num1" @input="calculerSomme">

    <input type="number" v-model.number="num2" @input="calculerSomme">

    <p>La somme de {{ num1 }} et {{ num2 }} est : {{ somme }}</p>

    </div>

    <script>

    new Vue({

    el: '#app',

    data: {

    num1: 0,

    num2: 0,

    somme: 0

    },

    methods: {

    calculerSomme: function() {

    this.somme = this.num1 + this.num2;

    }
    });

    </script>

    </body>

    </html>

    Ex2 :
    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Conversion de minutes en secondes</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>

    <body>

    <div id="app">

    <label for="minutes">Entrez le nombre de minutes :</label>

    <input type="number" id="minutes" v-model.number="minutes" @input="convertirEnSecondes">

    <p>{{ minutes }} minute{{ minutes !== 1 ? 's' : '' }} équivaut à {{ secondes }} seconde{{ secondes !==
    1 ? 's' : '' }}</p>

    </div>

    <script>

    new Vue({

    el: '#app',

    data: {

    minutes: 0,

    secondes: 0

    },
    methods: {

    convertirEnSecondes: function() {

    this.secondes = this.minutes * 60;

    });

    </script>

    </body>

    </html>

    Ex 3 :
    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Incrémentation d'un nombre en Vue.js</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>

    <body>

    <div id="app">

    <label for="nombre">Nombre initial :</label>

    <input type="number" id="nombre" v-model.number="nombre">

    <button @click="incrementer">Incrémenter</button>

    <label for="nouveauNombre">Nouveau nombre :</label>

    <input type="number" id="nouveauNombre" v-model.number="nouveauNombre">

    <p>Résultat après incrémentation : {{ resultat }}</p>


    </div>

    <script>

    new Vue({

    el: '#app',

    data: {

    nombre: 0,

    resultat: 0,

    nouveauNombre: 0

    },

    methods: {

    incrementer: function() {

    this.resultat = this.nouveauNombre !== 0 ? this.nouveauNombre + 1 : this.nombre + 1;

    });

    </script>

    </body>

    </html>

    Ex 4 :
    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calcul de la surface d'un triangle en Vue.js</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>

    <body>
    <div id="app">

    <label for="base">Base du triangle :</label>

    <input type="number" id="base" v-model.number="base">

    <label for="hauteur">Hauteur du triangle :</label>

    <input type="number" id="hauteur" v-model.number="hauteur">

    <button @click="calculerSurface">Calculer la surface</button>

    <p>La surface du triangle est : {{ surface }}</p>

    </div>

    <script>

    new Vue({

    el: '#app',

    data: {

    base: 0,

    hauteur: 0,

    surface: 0

    },

    methods: {

    calculerSurface: function() {

    this.surface = (this.base * this.hauteur) / 2;

    });

    </script>

    </body>

    </html>
    Ex 5 :
    <!DOCTYPE html>

    <html lang="fr">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Calcul de la factorielle en Vue.js</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    </head>

    <body>

    <div id="app">

    <label for="nombre">Entrez un nombre :</label>

    <input type="number" id="nombre" v-model.number="nombre">

    <button @click="calculerFactorielle">Calculer la factorielle</button>

    <p>La factorielle de {{ nombre }} est : {{ factorielle }}</p>

    </div>

    <script>

    new Vue({

    el: '#app',

    data: {

    nombre: 0,

    factorielle: 1

    },

    methods: {

    calculerFactorielle: function() {

    this.factorielle = this.calculerRecursiveFactorielle(this.nombre);
    },

    calculerRecursiveFactorielle: function(n) {

    if (n === 0 || n === 1) {

    return 1;

    } else {

    return n * this.calculerRecursiveFactorielle(n - 1);

    });

    </script>

    </body>

    </html>

    Vous aimerez peut-être aussi