javascript

Catatan Belajar Vue : Conditional dan Lists

aries

aries

— 3 min read

Biasanya yang paling sering dilakukan di view itu kalau gak mainin IF ya nge-loopingdata.Vue sudah memiliki directive tersendiri untuk hal itu, ada v-if untuk IF dan v-foruntuk loop. Untuk contoh v-if bisa salin html berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Show & Lists</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
  
    <div id="app">
      <button v-on:click="showHide">{{ string }}</button>
      <div v-if="show">
        Muncul
      </div>
    </div>
    
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        showHide() {
          this.show = !this.show
        }
      },
      computed: {
        string(){
          if(this.show == true)
          {
            return "Hide"
          }else{
            return  "Show"
          }
        }
      }
     })
  </script>
</html>

Hasilnya seperti ini :

Directive v-if pada div membaca properti show jika true maka div tersebut dimunculkan, dan jika false akan dihilangkan. Sebenarnya untuk menghilangkan dan memunculkan ada directive lainnya yaitu v-show. Bedanya v-if dan v-show itu saat penerapan DOM di browser, v-if benar-benar menghilangkan dari struktur html sedangkan v-show hanya menyembunyikan. Agar lebih jelas bisa salin html berikut dan lihat hasilnya di console developer tools browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Show & Lists</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
   
    <div id="app">
      <button v-on:click="showHide">{{ string }}</button>
     <div v-if="show">
        Muncul
      </div>
      <div v-show="show">
        Ini v-show
      </div>
    </div>
    
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        showHide() {
          this.show = !this.show
        }
      },
      computed: {
        string(){
          if(this.show == true)
          {
            return "Hide"
          }else{
            return  "Show"
          }
        }
      }
     })
  </script>
</html>

Lihat di console, yang menggunakan v-show saat tidak dimunculkan ditambahkan style="display:none" sedangkan yang v-if sama sekali tidak ada di browser. Begitupun saat muncul, yang v-if mendadak muncul dan style="display:none" si v-show juga hilang.

Untuk v-if masih ada v-else-ifdan v-else, untuk lebih detil bisa dilihat di situs ofisial vue.

Sekarang Loop atau pengulangan. Langsung ajalah, salin html berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Show & Lists</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
  
    <div id="app">
      <button v-on:click="showHide">{{ string }}</button>
      <div v-if="show">
        <p>Daftar Buku</p>
        <ul>
            <li v-for="book in books">{{ book.title }} ( {{ book.price }} )</li>
        </ul>
      </div>
    </div>
    
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        show: false,
        books : [
          {title: "Cara beternak Lele", price: 45000},
          {title: "Kaya tanpa pesugihan", price: 45000},
          {title: "Kiat-kiat MLM", price: 45000}
        ]
      },
      methods: {
        showHide() {
          this.show = !this.show
        }
      },
      computed: {
        string(){
          if(this.show == true)
          {
            return "Hide"
          }else{
            return  "Show"
          }
        }
      }
     })
  </script>
</html>

Pada HTML list saya tambahkan v-for dengan struktur v-for=alias in properti, dan selanjutnya tinggal panggil aja dengan cara alias.key pada sumber data. Hasilnya akan seperti ini.

Referensi :

  1. https://vuejs.org/v2/guide/conditional.html
  2. https://www.youtube.com/watch?v=sI_vgLd_CyU&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07&index=5

Read more