Cara Menggunakan Property Methods, Computed dan Filters pada VueJS

Mei 15, 2020 Posting Komentar

VueJs memiliki beberapa property yang biasa digunakan pada kesempatan ini kita akan membahas mengenai property methods, computed dan filters. ketiga properti tersebut memiliki tujuan yang hampir sama namun memiliki perbedaan dalam penggunaan nya.

Property Methods

pada properti methods biasanya digunakan untuk menyelesaikan suatu permasalahan yang dapat dipanggil secara berulang-ulang, methods dapat berupa fungsi untuk pemanggilan sebuag event, fungsi pada sebuag event dapat berupa return value atau sebaliknya, contoh : sebuah fungsi untuk menampilkan data,menghitung sebuah nilai luas,keliling, mengisi atau mengubah nilai dll. berikut adalah contoh sebuah event :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{nilai}}</h1>
        <br/>
        <button onclick="vm.tambah()">Tambah (+)</button>
        <button onclick="vm.kurang()">Tambah (-)</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                nilai:0,
            },
            methods:{
                tambah(){
                    this.nilai++
                },
                kurang(){
                    this.nilai--
                },
            },
        })
    </script>
</body>
</html>

Hasilnya :

Koding diatas terdapat sebuah variabel nilai yang akan berubah nilainya ketika tombol tambah dan kurang ditekan. penambahan dan pengurangan tersebut terjadi karena ketika tombol ditekan maka akan menjalankan event yang sudah dibuat, jika kita perhatikan pada koding diatas terdapat dua buah methods yaitu tambah dan kurang, pada fungsi tambah nilai akan bertambah satu ketika dipanggil dan fungsi kurang akan mengurangi nilai ketika dipanggil.

Property Computed

Properti computed berisi fungsi yang nilainya akan selalu dievaluasi ketika terjadi perubahan variabel data. Properti ini juga dapat mengolah value yang berasal dari data atau berasal dari v-model kemudian menyimpan hasil perhitungan tersebut pada cache. contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Property Computed</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Contoh Computed :</h1>
     <h2> {{bil1}}+{{bil2}} = {{jumlah}}</h2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                bil1:2,
                bil2:3
            },
            computed:{
                jumlah(){
                    return this.bil1+this.bil2
                }
            }
        })
    </script>
</body>
</html>

hasilnya :

Property Filters

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Hello</title>
    <script src="lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{pesan|upper}}</h1>
      <h1>{{selamat|upper}}</h1>
    </div>

    <script>
      var vm=new Vue({
        el:'#app',
        data:{
          pesan:'Hello World',
          selamat:'Selamat Datang'
        },
        filters: {
          upper (text) {
          return text.toUpperCase()
          }
        }
      })
    </script>
  </body>
</html>

properti filters dapat kita gunakan untuk melakukan manupulasi terhadap suatu text,kita juga dapat membuat sebuah format khusus untuk manipulasi tersebut, penggunaan filters pada tampilan dengan menambahkan simbol “pipe atau |” setelah data yang akan kita manipulasi contoh :

{{pesan | upper}}

{{selamat| upper}}

YIISolutions

Cara Menggunakan Property Methods, Computed dan Filters pada VueJS

Property Methods

Property Computed

Property Filters

Posting Komentar untuk "Cara Menggunakan Property Methods, Computed dan Filters pada VueJS"