Directive & List Vue.

pada tanggal
1. Directive.



Code:

<!DOCTYPE html>
<html>
<head>
<title>Directive</title>
<script src="lib/vue.js"></script>
</head>
<body>
<h1 style="text-align: center">Directive</h1>
<h2 style="text-align: center">Menggunakan <i><b>v-if, v-on:click, dan v-bind</b></i></h2>
<div id="app" style="text-align:center">
<button v-on:click="counter += 1"><!-- v-on:click akan berfungsi menambah 1 counter-->
Counter
</button> 
<h2>{{ counter }} (Telah Di clik Counter)</h2> <!--menampilkan jumlah counter yang sudah di click-->
<div v-if="counter == '0'">
<!-- Jika Counter bernilai 0 maka akan menampilkan tampilan gambar1 atau a.png-->
<img v-bind:src="gambar1" height="300px">
<!--menggunakan v-bind counter 0 menampilkan gambar1 yaitu a.png-->
</div>
<div v-else-if="counter == '1'">
<!-- Jika Counter bernilai 0 maka akan menampilkan tampilan gambar1 atau b.png-->
<img v-bind:src="gambar2" height="300px">
<!--menggunakan v-bindcounter 0 menampilkan gambar1 yaitu b.png-->
</div>
<div v-else-if="counter >= '2' ? counter = 0 : null">
<!--akan diulang kembali jika melebihi 2 kali-->
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
counter:0,
gambar1: 'picture/b.png',
gambar2: 'picture/a.png',
},
});
</script>
</body>
</html>

 Penjelasan :

  • v-on:click : v-on:click digunakan untuk menambahkan nilai value pada counter saat button di click
  • v-if : v-if digunakan untuk memberikan kondisi mana yang akan ditampilkan
  • v-bind:src : v-bind:src digunakan untuk mengambil source gambar yang telah tersimpan pada data

2. List 


Code:
<!DOCTYPE html>
<head>
    <script src="lib/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/popper.min.js"></script>
    <title>Directive</title>         
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/mdb.css">
    <style type="text/css">
        body {
            font-family: 'rgb';
        }
    </style>
</head>
<body>
   <!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="picture/image1.png" width="30" height="30" class="d-inline-block align-top" alt="">
    Coffee
  </a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>

</nav>

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="picture/coffee2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

<div id="app">
<table border=1>
<tr v-for="kopi of kopis">
<td>
<img width=100 :src="'picture/' + kopi.picture" />
</td>
<td>
title: {{ kopi.title }} <br>
description: {{ kopi.description }} <br>
authors: {{ kopi.authors }} <br>
price: Rp. {{ kopi.price }}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
kopis : [
{
id: 12,
title: 'Coffee',
description: 'Khusus Santai',
authors: 'Si Doel',
publish_year: 2019,
price: 10000,
picture: 'cofee3.jpg'
},

]
}
})
</script>
</body>
</html>

 Penjelasan:
  • v-for : v-for digunakan untuk melakukan pengulangan pemanggilan data array menjadi satu object dengan nama coffee
  • :src : :src atau v-bind:src digunakan untuk mengambil source gambar 


Komentar

Posting Komentar