Kalkulator Menggunakan Vue

pada tanggal
1. Buat File bernama kalkulator.html
2. Isikan Coding seperti berikut.


<!DOCTYPE html>

<head>
    <script src="lib/vue.js"></script>
    <title>Kalkulator</title>
    <style type="text/css">
        .email_color {
            color: blue;
        }
    </style>

</head>

<body>
    <h1 style="text-align: center">Kalkulator</h1>
    <div id="app">
        <h1> Masukan Angka : <input v-model.number="Angka1" placeholder="Isikan Angka"></h1>
        <h1>Masukan Angka : <input v-model.number="Angka2" placeholder="Isikan Angka"></h1>
    <br>
    <br>
        <button onclick="app.tambah()">+</button>
        <button onclick="app.kurang()">-</button>
        <button onclick="app.kali()">x</button>
        <button onclick="app.bagi()">/</button>
     
        <h1>{{hasil}}</h1>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                Angka1: '',
                Angka2: '',
                hasil: '',
            },
            methods: {
                tambah() {
                    this.hasil = this.Angka1 + this.Angka2
                },
                kurang() {
                    this.hasil = this.Angka1 - this.Angka2
                },
                kali() {
                    this.hasil = this.Angka1 * this.Angka2
                },
                bagi() {
                    this.hasil = this.Angka1 / this.Angka2
                }
            }
        });
    </script>
</body>

</html>

 dan hasilnya akan seperti pada gambar berikut :




Komentar

Posting Komentar