Table of Content
- Introduction
- Klik Tombol Dengan V-On:Click
- Klik Tombol V-On:Click Dengan Methods
- Key Modifier
- Contoh Penggunaan Key Modifier
- Modifier Lainnya
- Toogle
- Toogle Level 2
Introduction
Event Handler menangkap event yg dilakukan oleh user, kemudian menjalankan suatu kode javascript yg telah dibuat. V-on juga dapat diringkas menjadi @
Klik Tombol Dengan V-On:Click
app.js
let app = new Vue({
el: '#app',
data: {
pesan: ''
}
})index.html
<div id="app">
<p>{{ pesan }}</p>
<button @click="pesan = 'Anda telah klik tombol'">Klik</button>
</div>Pada v-on:click kita dapat menambahkan expression beserta value nya.
Klik Tombol V-On:Click Dengan Methods
app.js
let app = new Vue({
el: '#app',
methods: {
pesan: function(){
alert('Anda telah klik tombol')
}
}
})index.html
<div id="app">
<button @click="pesan">Klik</button>
</div>Key Modifier
Selain menangani event dari mouse, VueJS juga dapat menangani event berupa inputan keyboard seperti Enter, Spasi, dan lain-lain.
Contoh Penggunaan Key Modifier
app.js
let app = new Vue({
el: '#app',
methods: {
pesan: function(){
alert('Anda telah menekan Enter!')
}
}
})index.html
<div id="app">
<input type="text" @keyup.enter="pesan">
</div>Modifier Lainnya
- @keyup.enter
- @keyup.esc
- @keyup.space
- @keyup.up
- @keyup.down
- @keyup.right
- @keyup.left
- @click.left
- @click.right
Toogle
VueJS mendukung penggunaan toogle on-off pada suatu aksi. Dengan toggle ini kita dapat secara instan mengubah suatu nilai. Toogle menggunakan tipe data Boolean.
app.js
let app = new Vue({
el: '#app',
data: {
tampil: false
}
})index.html
<div id="app">
<p v-show="tampil">Data ditampilkan</p>
<button @click="tampil=!tampil">Klik</button>
</div>Penjelasan :
- V-Show digunakan jika tipe data boolean.
- =! untuk melakukan switch true ke false atau false ke true
Toogle Level 2
app.js
let app = new Vue({
el: '#app',
data: {
isActive: false
}
})index.html
<div id="app">
<button
:key="isActive"
@click="isActive=!isActive">
{{ isActive ? 'Active' : 'Not Active' }}
</button>
</div>