Jika kita membicarakan satuan panjang kita pasti teringat pada jaman waktu kita sekolah SD dulu, dimana kita harus menghafal berapa perbedaan jarak antara kilometer ke meter dan meter kelainnya, maka dari itu disini saya akan mencoba cara membuat konversi satuan panjang dengan VueJs, dimana dari 1km ke bawah itu kita akan di kalikan 10, ini ada rumusnya ya, seperti tangga jika kebawah di kalikan 10 jika ke atas di bagi 10, bagaiaman cara membuatnya simak terus ya teman-teman.
di VueJs untuk cara membuat konversi satuan panjang dengan VueJs, saya membutuhkan sebuah bantuan watch, watch ini cocok digunakan untuk menghasilkan nilai yang keluar langsung seperti perhitungan satuan panjang ini, caranya cukup simple di dalam data kita masukan value dari sebuah inputan, disini saya akan mencoba membuat perbandingan dari km ⇔ m ⇔ cm ⇔ mm, lalu di dalam watch saya tinggal mensetting ketika saya menginputkan dari km maka yang lain akan mengeluarkan hasil, seperti ini:
1 2 3 4 5 6 |
km: function(val){ this.km = val; this.m = val * 1000 this.cm = val * 100000 this.mm = val * 1000000; }, |
dan seterusnya, oke langsung saja silahkan teman-teman copy saja dan silahkan lihat hasilnya sendiri:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-3" id="app"> <div class="row"> <div class="col-md-12 text-center bg-primary text-light"> <h1>Cara Membuat Konversi Satuan Panjang dengan VueJs</h1> </div> </div> <div class="row mt-3"> <div class="col-md-6"> <img src="Tangga Konversi Pengukuran Satuan Panjang.jpg" class="img-fluid"> </div> <div class="col-md-6"> <form> <div class="form-group row"> <label for="km" class="col-sm-2 col-form-label">Km</label> <div class="col-sm-10"> <input type="number" class="form-control" v-model="km" placeholder="Km"> </div> </div> <div class="form-group row"> <label for="meter" class="col-sm-2 col-form-label">Meter</label> <div class="col-sm-10"> <input type="number" class="form-control" v-model="m" placeholder="Meter"> </div> </div> <div class="form-group row"> <label for="cm" class="col-sm-2 col-form-label">Cm</label> <div class="col-sm-10"> <input type="number" class="form-control" v-model="cm" placeholder="Centimeter"> </div> </div> <div class="form-group row"> <label for="mm" class="col-sm-2 col-form-label">Mm</label> <div class="col-sm-10"> <input type="number" class="form-control" v-model="mm" placeholder="Milimeter"> </div> </div> </form> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { km: 0, m: 0, cm: 0, mm: 0 }, watch:{ km: function(val){ this.km = val; this.m = val * 1000 this.cm = val * 100000 this.mm = val * 1000000; }, m: function(val){ this.km = val/1000; this.m = val; this.cm = val*100; this.mm = val*1000; }, cm: function(val){ this.km = val/100000; this.m = val/100; this.mm = val * 10; this.cm = val; }, mm: function(val){ this.km = val/1000000; this.m = val/1000; this.cm = val/10; this.mm = val; } } }) </script> </body> </html> |
disini saya mencoba membuatnya dengan link CDN jadi teman-teman jika mencopy code diatas akan bisa langsung melihat hasilnya demo, dan ini tampilan layout hasil jadinya:
Bagaimana silahkan teman-teman coba masukan dari km, m, cm, mm, dan lihat inputan dari yang lain akan ikut berubah, oke sepertinya penjelasan saya cukup jelas tentang cara membuat konversi satuan panjang dengan VueJs, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.