Properti Methods, Computed, & Filters pada Vue.js

Oleh Indrawati Februari 03, 2021 Posting Komentar

Properti Methods, Computed, & Filters - Pada objek Vue juga ada properti methods, computed dan filter yang terkadang cukup membingungkan para

pemula tentang kapan saat yang tepat menggunakannya karena ketiganya sama-sama berisi fungsi-fungsi.

Meskipun telah jelas definisinya namun ketiga properti ini terkadang dapat menyelesaikan kasus yang sama.

Properti Methods

Properti methods dapat berisi fungsi-fungsi (Javascript tentunya) yang dapat dipanggil disemua tempat pada aplikasi berbasis Vue. Jika ada action atau event yang memanggil suatu fungsi, maka fungsi tersebut cocok dikategorikan sebagai methods. Contoh: fungsi untuk mengevaluasi suatu nilai, menampilkan pesan, mengubah variabel, dsb. Contoh methods :

<!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 Vue Method</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">
      <h1>{{ counter }}</h1>
      <button onclick="app.increment()">+</button>
    </div>

    <!-- aplikasi Vue Hello -->
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
        methods: {
          increment() {
            this.counter++;
          },
        },
      });
    </script>
  </body>
</html>

Hasil :

Properti Methods, Computed, & Filters pada Vue.js

Properti Computed

Properti computed berisi fungsi-fungsi yang nilainya akan senantiasa dievaluasi ketika terjadi perubahan variabel data yang menjadi dependensinya. Fungsi pada computed umumnya mengembalikan nilai (return value), Contoh :


    <!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 Vue - Method Computer dan Filter</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">{{ fullName }}</div>

    <!-- aplikasi Vue -->
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          firstName: "STTI",
          lastName: "Tanjungpinang",
        },
        computed: {
          fullName: function () {
            return this.firstName + " " + this.lastName;
          },
        },
      });
    </script>
  </body>
</html>

Hasil :

Fungsi fullName pada contoh diatas mengembalikan nilai berupa gabungan string antara variabel firstName dan lastName. Fungsi ini akan di cache oleh Vue sehingga nilainya akan selalu merujuk ke nilai sebelumnya kecuali jika ada perubahan variabel firstName dan lastName yang menjadi dependensinya.

Properti Filters

Disamping methods dan computed, Objek Vue juga memiliki properti filters yang dapat berisi fungsi untuk digunakan memanipulasi tampilan atau format teks pada template. Filters ditulis dengan menggunakan simbol | atau “pipe”. Contoh penggunaan filters adalah untuk mengubah bentuk teks menjadi huruf kapital. Contoh filters :


  <!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 Vue - Method Computer dan Filter</title>

    <!-- Menyisipkan Vuejs dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <!-- elemen kontainer untuk aplikasi -->
    <div id="app">
      <h1>{{ message | upper }}</h1>
    </div>
    <!-- aplikasi Vue -->
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello world!",
        },
        filters: {
          upper(text) {
            return text.toUpperCase();
          },
        },
      });
    </script>
  </body>
</html>

Hasil :

MATERI KULIAH

Properti Methods, Computed, & Filters pada Vue.js

Properti Methods

Properti Computed

Properti Filters

Posting Komentar untuk "Properti Methods, Computed, & Filters pada Vue.js"