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 s…


This content originally appeared on DEV Community and was authored by MedanInCode

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.

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>

atau bisa langsung di tag

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

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.


This content originally appeared on DEV Community and was authored by MedanInCode


Print Share Comment Cite Upload Translate Updates
APA

MedanInCode | Sciencx (2022-01-09T10:20:16+00:00) Menampilkan Raw Html Di Vue. Retrieved from https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/

MLA
" » Menampilkan Raw Html Di Vue." MedanInCode | Sciencx - Sunday January 9, 2022, https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/
HARVARD
MedanInCode | Sciencx Sunday January 9, 2022 » Menampilkan Raw Html Di Vue., viewed ,<https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/>
VANCOUVER
MedanInCode | Sciencx - » Menampilkan Raw Html Di Vue. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/
CHICAGO
" » Menampilkan Raw Html Di Vue." MedanInCode | Sciencx - Accessed . https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/
IEEE
" » Menampilkan Raw Html Di Vue." MedanInCode | Sciencx [Online]. Available: https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/. [Accessed: ]
rf:citation
» Menampilkan Raw Html Di Vue | MedanInCode | Sciencx | https://www.scien.cx/2022/01/09/menampilkan-raw-html-di-vue/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.