A.Directive
Saya masukkan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Directive vue js</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p> Berbelanja Untuk Kategori </p>
<button v-on:click="gender = 1">
Pria
</button>
<button v-on:click="gender = 2">
Wanita
</button>
<div v-if="gender === 1" >
<img v-bind:src="m" width="300">
<p>Pria</p>
</div>
<div v-else-if= "gender === 2" >
<img v-bind:src="f" width="300">
<p>Wanita</p>
</div>
<div v-else >
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
gender : 0,
m: 'images/pria.png',
f : 'images/wanita.png'
}
})
</script>
</body>
</html>
Kemudian ada juga v-on click, jika kita klik yang Pria maka akan muncul seperti ini:
dan jika yang Wanita diklik maka akan seperti ini:
Dan kita pun bisa merubah v-if nilai 1 yang isinya male dan v-if female nilai 2.
B.List
Saya masukkan kode ini:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="lib/vue.js"></script>
<title>list</title>
</head>
<body>
<h1>V E N T E L A</h1>
<div id="app">
<table border=315>
<tr v-for="book of books">
<td>
<img width=500 :src="'images/' + book.image" />
</td>
<td>
Produk: {{ book.Produk }} <br>
Deskripsi: {{ book.Deskripsi }} <br>
Harga: {{ book.Harga }}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
books : [
{
id: 10,
Produk: 'Public Series High',
Deskripsi: 'Black / Natural',
Harga: 260000,
image: 'pubhigh.jpg'
},
{
id: 13,
Produk: 'Public Series Low',
Deskripsi: 'Black / Natural',
Harga: 250000,
image: 'publow.jpg'
},
{
id: 14,
Produk: 'Retro Series',
Deskripsi: 'Yellow / Black Stripe',
Harga: 400000,
image: 'retro.jpg'
}
]
}
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<h1>VENTELA Products 2020</h1>
</body>
</html>
dari kode diatas sederhananya adalah membuat tampilan semacam kist atau daftar, terlihat seperti di web marketplace pada umumnya. Terdiri dari gambar dan juga ada deskripsinya.
Pada table saya memasukkan Produk, Deskripsi dan Harga. yang dimana sebelumnya sudah dibuat variablenya di v-for="book of books"> serta juga ada gambar produknya yang dipanggil dengan nama gambar tersebut yang terletak di satu folder yang bernama "images".
Setelah itu saya juga memakai Bootstrap 4 bisa cek disini https://getbootstrap.com/
Sekian
