Operasi Hitung dengan Vue JS

Materi kali ini membahas tentang operasi hitung dengan menggunakan Vue JS. user tinggal memasukkan angkanya maka perhitungan dilakukan secara otomatis tanpa harus mengklik tombol hitung. sebagai contoh operasi hitung 2 inputan dengan operasi matematika tambah (+).

untuk melakukan perhitungan diperlukan code computed

computed: {
hasil: function() {
return parseInt(this.nil1) + parseInt(this.nil2);
}

adapun codenya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Latihan Vue Binding </title>

    <!-- Vuejs CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="coba">
        <input type="text" v-model="nil1">
    <input type="text" v-model="nil2">
        <p>{{ nil1 }} + {{ nil2 }} = {{ hasil }}</p>
    </div>
    
    <script>
        var app = new Vue({
            el: "#coba",
            data: {
                nil1: '',
        nil2: '',

            },
    computed: {
                hasil: function() {
                    return parseInt(this.nil1) + parseInt(this.nil2);
                }
            }
        })
    </script>
</body>
</html>

Hasilnya

misalkan operator perhitungan bergantung dari user, user tinggal memilih hasil perhitungan penjumlahan (+), Perkalian (*), dan Pengurangan (-). dalam hal ini dapat menggunakan switch case. adapun codenya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Latihan Vue Binding </title>

    <!-- Vuejs CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="coba">
        <input type="text" v-model="nil1">
    <select v-model="opr">
                <option>+</option>
                <option>-</option>
                <option>*</option>
            </select>
    <input type="text" v-model="nil2">
        <p>{{ nil1 }} {{ opr }} {{ nil2 }} = {{ hasil }}</p>
    </div>
    
    <script>
        var app = new Vue({
            el: "#coba",
            data: {
                nil1: '',
        nil2: '',
        opr: ''

            },
       computed: {
                hasil: function() {
                     switch (this.opr) {
                        case "+":
                        return parseInt(this.nil1) + parseInt(this.nil2)
                        break;
                        case "-":
                        return parseInt(this.nil1) - parseInt(this.nil2)
                        break;
                        case "*":
                        return parseInt(this.nil1) * parseInt(this.nil2)
                        break;
                    }
                }
            }
        })
    </script>
</body>
</html>

hasilnya dapat dilihat sebagai berikut: