Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang template pada Sebuah Vue.js. Pada artikel sebelumnya kita telah belajar bagaimana mendapatkan output dalam bentuk konten teks di layar. Dalam artikel kali ini, kita akan belajar cara mendapatkan output dalam bentuk template HTML di layar.

Untuk memahami itu semua silahkan simak penjelasan di bawah ini;

vue_template.js

Sekarang, misalkan kita ingin menunjukkan konten html di halaman. Jika kita menggunakannya dengan interpolasi, yaitu dengan kurung kurawal ganda, inilah yang akan kita dapatkan di browser

template pada Sebuah Vue.js

Jika kita melihat konten html ditampilkan dengan cara yang sama seperti yang say berikan dalam konten html variabel, ini bukan yang saya inginkan, saya ingin konten itu ditampilkan dalam konten HTML yang tepat di browser.

Untuk ini, kita harus menggunakan direktif v-html. Saat saya menetapkan direktif v-html ke elemen html, VueJS tahu bahwa ia harus menampilkannya sebagai konten HTML. Mari tambahkan arahan v-html di file .html dan lihat perbedaannya.

Sekarang, kita tidak memerlukan kurung kurawal ganda untuk menampilkan konten HTML, sebagai gantinya saya telah menggunakan v-html = “htmlcontent” di mana htmlcontent didefinisikan di dalam file js sebagai berikut –

Output di browser adalah sebagai berikut –

template pada Sebuah Vue.js

Oke itulah tadi pembahasan saya tentang template pada Sebuah Vue.js, semoga bermanfaat.