Selanjutnya disini kita akan mencoba membuat penjumlahan berbeda di setiap button menggunakan VueJS, dengan menggunakan VueJs kita bisa menjumlahkan sebuah bilangan ya benar sama seperti halnya javascript, disini kita akan menggunakan sebuah event, karena disini kita menggunakan button maka event yang tepat adalah event click, oke seperti apa cara membuatnya simak terus ya teman-teman.
Sebelum membuat penjumlahan berbeda di setiap button menggunakan VueJS, di VueJS terdapat bantuan lain selain data yaituu methods, menthods ini berfungsi untuk membuat proses event yang akan kita lakukan, karena disini event click maka event click ini yang akan kita proses nantinya di methods ini, lalu seperti apa langkahnya, seperti ini:
- seperti yang saya tulis di atas caranya sama seperti javascript, kita tulis terlebih dahul eventnya di buttonnya misal @click=”nama-methodsnya” atau v-on:click=”nama-methodsnya” .
- lalu nama methods itu yang nanti kita pakai di method, dan kita proses di situ.
supaya tidak tambah bingung silahkan teman-teman copy saja code di bawah ini.
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Membuat Penjumlahan Berbeda di Setiap Button Menggunakan VueJS</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> </head> <body> <div id="app"> <div class="container mt-4"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <div class="jumbotron"> <h1 class="display-4 text-center">Membuat Penjumlahan Berbeda di Setiap Button Menggunakan VueJS</h1> <hr class="my-4"> <a class="btn btn-primary btn-sm" href="#" role="button" @click="tambah10(10)">+10</a> <a class="btn btn-primary btn-sm" href="#" role="button" @click="tambah50(50)">+50</a> <a class="btn btn-primary btn-sm" href="#" role="button" @click="tambah100(100)">+100</a> <a class="btn btn-danger btn-sm float-right ml-2" href="#" role="button" @click="kurang10(10)">-10</a> <a class="btn btn-danger btn-sm float-right ml-2" href="#" role="button" @click="kurang50(50)">-50</a> <a class="btn btn-danger btn-sm float-right ml-2" href="#" role="button" @click="kurang100(100)">-100</a> </div> <div class="display-4 bg-light">{{hasil}}</div> </div> <div class="col-md-2"></div> </div> </div> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { hasil: 0 }, methods:{ tambah10(param){ this.hasil += param }, tambah50(param){ this.hasil += param }, tambah100(param){ this.hasil += param }, kurang10(param){ this.hasil -= param }, kurang50(param){ this.hasil -= param }, kurang100(param){ this.hasil -= param } } }) </script> </body> </html> |
bisa di lihat tambah10(param){ this.hasil += param } itu di prosesnya seperti ini: param itu di dapatkan dari parameter yang kita ambil saat mengklik ada disini
|
1 |
<a class="btn btn-primary btn-sm" href="#" role="button" <span style="color: #ff0000"><strong>@click="tambah10(10)"</strong></span>>+10</a> |
dan this.hasil, hasil sendiri adalah nilai awalnya di dapatkan dari data. bisa teman-teman lihat di atas ya, dan bagaimana hasilnya seperti ini:
kita lihat demonya
jadi seperti itu, oke saya rasa cukup sampai disini belajar kita tentang membuat penjumlahan berbeda di setiap button menggunakan VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.