Menampilkan Raw Html Di Vue

Tutorial kali ini cukup mudah,hanya bagaimana kita menampilkan html mentah atau biasa dibilang orang, raw html.

Jika kita punya variabel yang berisi tag html,seperti dibawah ini.

textHtml: `<b>Ini teks bold</b>`

lalu menampilkan seperti ini.

<p>{{textHtml}}</p>

Maka akan keluar hasil seperti dibawah.

Bisa dilihat tag tidak terrender.Jika ingin variabel tersebut terrender kita harus menggunakan directive bernama v-html.

Sehingga kode kita menjadi.

<p><span v-html="textHtml"></span></p>

atau bisa langsung di tag

<p v-html="textHtml"></p>

Hasil yang kita dapatkan seperti gambar dibawah,tag html akan ikut dirender.

Sekian tutorial kali ini,saya rasa cukup mudah membuatnya di vue, karena hanya menambahkan directive v-html.