Directive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aplikasi Sederhana</title>
</head>
<body>
<h1>Directive IF</h1>
<div id="app">
<button v-on:click="vm.add()">
Add Counter
</button>
<div v-if="counter == '0'">
<img v-bind:src="img1" width="200px" height="200px">
</div>
<div v-else-if="counter == '1'">
<img v-bind:src="img2" width="200px" height="200px">
</div>
<div v-else-if="counter == '2'">
<img v-bind:src="img3" width="200px" height="200px">
</div>
<div v-else-if="counter == '3'">
<img v-bind:src="img4" width="200px" height="200px">
</div>
<div v-else>
Tidak ada foto yang dapat ditampilkan.
</div>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
counter: null,
img1: 'img1.jpg',
img2: 'img2.jpg',
img3: 'img3.jpg',
img4: 'img4.jpg'
},
methods:{
add(){
this.counter+=1;
}
}
});
</script>
</html>
 |
| Sebelum di klik tombol Add Counter |
 |
| Setelah di klik tombol Add Counter |
V-IF
V-if adalah sintaks untuk melakukan pengkondisian(if else statement)
V-ON
V-on adalah sintaks untuk melakukan/memanggil methods dalam vue
V-Bind
V-Bind adalah sintaks untuk memanggil nilai dari variabel dalam vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List Products</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
a.category-link {
color: black;
letter-spacing: 2px;
margin-left: 20px;
margin-right: 20px;
}
a.category-link:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
}
.card {
box-sizing: border-box;
border: none;
transition: 0.4s;
margin-top: 10px;
filter: grayscale(100%);
}
.card:hover {
filter: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">
<h3>
<i>Amadeus</i>
</h3>
</a>
<button
class="navbar-toggler d-lg-none"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavId"
aria-controls="collapsibleNavId"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"
>Products <span class="sr-only">(current)</span></a
>
</li>
</ul>
</div>
</nav>
<hr width="80%" />
<div class="col-md-10" style="margin:0 auto;text-align:center">
<a href="" class="category-link">Bottom</a>
<a href="" class="category-link">Top</a>
<a href="" class="category-link">Footwear</a>
</div>
<hr width="80%" />
<div class="container">
<div id="app">
<div
class="col-md-3 float-left"
v-for="(produk, index) of products"
:key="index"
>
<div class="card">
<img
class="card-img-top"
style="height:300px"
:src="'img/' + produk.image"
alt=""
/>
<div class="card-body text-center">
<h4 class="card-title">{{produk.nama}}</h4>
<p class="card-text" style="opacity:.8">
{{produk.kategori}}
<br />
<span>Rp. {{produk.harga}},-</span>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="lib/vue.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
products: [
{
id: 1,
nama: "T-Shirt 1",
kategori: "Top",
harga: 150000,
image: "top1.jpg"
},
{
id: 2,
nama: "T-Shirt 2",
kategori: "Top",
harga: 150000,
image: "top2.jpg"
},
{
id: 3,
nama: "T-Shirt 3",
kategori: "Top",
harga: 150000,
image: "top3.jpg"
},
{
id: 4,
nama: "T-Shirt 4",
kategori: "Top",
harga: 150000,
image: "top4.jpg"
},
{
id: 5,
nama: "Jeans 1",
kategori: "Bottom",
harga: 150000,
image: "bottom1.jpg"
},
{
id: 6,
nama: "Jeans 2",
kategori: "Top",
harga: 150000,
image: "bottom2.jpg"
},
{
id: 7,
nama: "Jeans 3",
kategori: "Top",
harga: 150000,
image: "bottom3.jpg"
},
{
id: 8,
nama: "Jeans 4",
kategori: "Top",
harga: 150000,
image: "bottom4.jpg"
},
{
id: 9,
nama: "Foot 1",
kategori: "Footwear",
harga: 150000,
image: "foot1.jpg"
},
{
id: 10,
nama: "Foot 2",
kategori: "Footwear",
harga: 150000,
image: "foot2.jpg"
},
{
id: 11,
nama: "Foot 3",
kategori: "Footwear",
harga: 150000,
image: "foot3.jpg"
}
]
}
});
</script>
</html>
0 komentar: