Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

Whoah akhirnya samapi juga di tutorial vue.js bagian 7 tentang Computed Properties Pada Vue.js dan Contohnya . Well jika sebelumnya kita sudah mempelajari Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js , contoh event handling pada vue.js dan vue component yang lengkap dengan contohnya. Pada Computed properties ini akan sedikit lebih sulit sedikit namun saya yakin anda pasti bisa mempelajari materi ini dengan mudah dengan contoh yang akan saya jelaskan di bawah ini.

Contoh Program 1

Code dan penjelasan

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- atribut viewmodel -->
<input type="text" v-model="points"></input>
 <h1>Skill : {{ skill }}</h1>
 
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
 new Vue({
  el: 'body', //el menggunakan body
  data : {
   points : 50
  },

  computed : { //computed properties
   skill: function(){ // var baru yang berisi fungsi 
    if(this.points <= 100){
     return 'Beginner'

    }
    return 'Advanced'
   }
  }

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

Contoh 2

Computed Properties Pada Vue.js dan Contohnya

Code dan penjelasannya

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

<input type="text" v-model="depan"></input>
<input type="text" v-model="belakang"></input>
<h1>Nama : {{ lengkap }}</h1>
 
<script src="vue.js"></script>
<script>
 new Vue({
  el: 'body',
  data : {
   depan : 'Zen',
   belakang : 'Huzaini',
   lengkap : 'Zen Huzaini'
  },

  //cara 1
  // watch: { //obj
  //  depan: function(depan){
  //   this.lengkap = depan + ' ' + this.belakang;
  //  },

  //  belakang : function(belakang){
  //   this.lengkap = this.depan + ' ' + belakang;
  //  }
  // }

  //cara 2
  computed:{
   lengkap: function(){
    return this.depan + ' ' + this.belakang;
   }
  }

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

Jadi begitulah sedikit pemahaman saya tentang Vue.js dan penggunaannya. Semoga dapat bermanfaat. Jangan lupa jika anda memiliki pertanyaan terkait vue.js, silahkan jangan sungkan utunk bertanya melalui komentar ya, insyaAllah saya akan menjawab sebisa saya. :)
Wassalamualaikum wr. wb

Tutorial Vue.Js Bagian 7 : Computed Properties Pada Vue.js dan Contohnya

Share this

Author : zenhuzaini

Related Posts