Tutorial Vue [Part 4] - Data Dinamis

Setelah sebelumnya kita berhasil membuat halaman pertama kita, namun halaman tersebut masih belum dinamis sehingga jika kita akan mengubah data maka kita harus menggantinya secara manual dengan mengedit script. Oleh karenanya vue memberikan kemudahan untuk membuat data dinamis. Coba ubah script padaa App.vue menjadi sebagai berikut

<template>
Name : {{ name }}
</template>

<script>
export default {
  name: 'App',
    data() {
        return {

            name: "alfath maulid",
        };
  }
}
</script>

<style>
</style>

Sehingga tampilan akan berubah sebagai berikut

lalu coba juga script berikut

<template>
Name : {{ name }}
<button v-on:click="changeName">Change Name</button>
</template>

<script>
export default {
  name: 'App',
    data() {
        return {

            name: "alfath maulid",
        };
  }
methods: {
    changeName() {
      this.name = "John Due";
    }
  },
}
</script>

<style>
</style>