DEV Community

Cover image for Menampilkan Raw Html Di Vue
MedanInCode
MedanInCode

Posted on • Originally published at medanincode.com

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>`
Enter fullscreen mode Exit fullscreen mode

lalu menampilkan seperti ini.

<p>{{textHtml}}</p>
Enter fullscreen mode Exit fullscreen mode

Maka akan keluar hasil seperti dibawah.

Menampilkan Raw Html Di Vue<br>
 1

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>
Enter fullscreen mode Exit fullscreen mode

atau bisa langsung di tag

<p v-html="textHtml"></p>
Enter fullscreen mode Exit fullscreen mode

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

Menampilkan Raw Html Di Vue <br>
2

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

Top comments (0)