Untuk Menampilkan data dalam Vue.Js terdapat beberapa cara dan metode, diantaranya adalah declarative rendering, directive v-text, dan directive v-html, yang masing-masing memiliki karakter yang berbeda. Dan kita juga bisa menampilkan data dengan tipe data yang berbeda-beda juga.
Selain tipe data teks, seperti ‘Selamat pagi Juara’. Vue.Js juga mendukung tipe data lain berupa numerik, pilihan true atau false (Boolean), array dan teman-temannya.
Adapun caranya sama dengan menampilkan nilai yang berupa teks, berikut contohnya:
new Vue ({
el: '#app',
data: {
teks: 'Selamat pagi Juara',
angka: 100,
angka2: 6.5,
bool1: true,
bool2: false,
array: ['satu', 'dua', 'tiga', 'empat']
}
})
Berbeda dengan tipe data yang berupa teks, untuk menggunakan tipe data numerik, Boolean, array dan teman-temannya. Tidak perlu menggunakan tanda petik, jadi langsung dituliskan saja nilainya.
Untuk menampilkannya di dalam file index.html, berikut contoh script yang akan kita buat:
new Vue ({
el: '#app',
data: {
teks: 'Selamat pagi Juara',
angka: 100,
angka2: 6.5,
bool1: true,
bool2: false,
array: ['satu', 'dua', 'tiga', 'empat']
}
})