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.
Di Vue.Js kita bisa juga menampilkan Multidata (banyak data), semisal kita mau menampilkan nilai dari data ‘teks’, ‘teks2’, dan ‘teks3’. Tentu kita bisa menampilkan Multidata pada Vue.Js, berikut contoh penerapannya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{teks}} <br>
{{teks2}} <br>
{{teks3}}
</div>
<script src="vue.min.js"></script>
<script src="apps.js"></script>
</body>
</html>
nb: <br> adalah tag HTML yang berfungsi untuk pindah baris
Kita akan menggunakan Vue.Js secara external, jadi kita buat terlebih dahulu file apps.js nya, berikut contoh script menampilkan multidata:
new Vue ({
el: '#app',
data: {
teks: 'Selamat pagi Juara',
teks2: 'Belajar Vue.Js',
teks3: 'Hello World!'
}
})
Sebagai catatan, ada tanda koma setelah nilai dari tiap-tiap data yaitu menunjukkan bahwa data lebih dari satu. Untuk hasilnya teman-teman bisa cek pada browser yah. Semoga bermanfaat