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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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:
|
1 2 3 4 5 6 7 8 |
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.