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.
Namun kita juga bisa melakukan kombinasi output dari Mustaches, directive v-text, dan v-html dalam satu ‘parent / rumah’. Untuk itu, simak contoh berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{pesan}}</p>
<p v-text="pesan2"></p>
<p v-html="pesan3"></p>
</div>
<script src="vue.min.js"></script>
<script src="apps.js"></script>
</body>
</html>
Disini kita akan membuat file apps.js untuk menyimpan script Vue.Js yang external:
new Vue ({
el: '#app',
data: {
pesan: 'Selamat pagi Juara',
pesan2: 'Belajar Vue.Js',
pesan3: '<b>Hello World!</b>'
}
})
Nah disini kita sudah membuat contoh kombinasi dari beberapa metode/cara untuk menampilkan data pada Vue.Js yah teman-teman, untuk pesan kita menggunakan cara Mustaches, untuk pesan2 kita menggunakan cara v-text, dan untuk pesan3 kita menggunakan cara v-html. Semoga bermanfaat.