bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok disini, kali ini kita akan belajar mengenai class, attribute dan pengkondisian.
Nah ternyata vue js ini kita bisa membuat class dan menggunakan attribute, jadi dia punya cara sendiri untuk membuat class dan attribute.
Oh iya kita juga bakal belajar mengenai pengkondisian, tetapi kita akan menggunakan boolean (true/false).
Study Case #1
Seperti biasa kita buat file-nya terlebih dahulu, kita buat dengan nama latihan3.html
Kali ini kita akan membuat class dan attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class & attribute</title>
<style>
</style>
</head>
<body>
<div id="root">
<!-- kita akan membuat bind : binding artinya mengikat. -->
<!-- v-bind:title kita menggunakan method title di html -->
<!-- halo ini maksudnya nama titlenya yang akan kita samakan pada vue -->
<!-- sentuh aku dong adalah nama buttonnya -->
<button v-bind:title="halo">sentuh aku dong</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
el: '#root',
data: {
// halo yang kita samakan dengan v-bind:title
// ketika kita sentuh button muncul buka muhrim halo
halo: 'buka muhrim woi'
}
});
</script>
</body>
</html>Tampilanya seperti dibawah ini
Study Case #2
Kita akan membuat button, lalu ada class-nya dan ada attribut-nya. Oh iya kita juga menggunakan pengkondisian. Jika kita klik berarti true maka button tersebut berubah menjadi warna biru.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class & attribute</title>
<style>
/* class is-loading yang didapat dari button class */
.is-loading {
background: red;
}
</style>
</head>
<body>
<div id="root">
<!-- kita membuat button class is-loading : isLoading -->
<!-- is-loading untuk class css | isLoading untuk vue -->
<!-- kita membuat button add click event listener dengan nama toggleClass -->
<button :class="{'is-loading': isLoading}" @click="toggleClass">Klik aku dong mas</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
el: '#root',
// isLoading false artinya button tidak berubah warna
data: {
isLoading: false
},
// kita menggunakan methods, lalu menggunakan button event toggle class yang artinya ketika button toggleClass di klik maka lakukan sesuatu dong!
// nah ketika di klik berarti kita panggil class isLoading true(benar), nah berarti ketika di panggil (button di klik) dia akan berubah warna, karena kita sudah setting di style css background color:red
methods: {
toggleClass() {
this.isLoading = true;
}
}
});
</script>
</body>
</html>Gambar dibawah ini
Nah kalau masih bingung, bisa baca keterangan-nya di scriptnya ya. om bewok udah nulisin loh, semoga mengerti ya, kalau belum mengerti bisa nanya di website lain. kwkwk. bercanda, nanya di komentar aja yaaa.
No comments:
Post a Comment