Cara Menampilkan Berbagai Macam Tipe Data Pada Vue.Js

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']
	}
})

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']
	}
})