How to render a HTML string in Vue app
In this post we will give you information about How to render a HTML string in Vue app. Hear we will give you detail about How to render a HTML string in Vue appAnd how to use it also give you demo for it if it is necessary.
Learn, how to render the html string as real dom elements in Vue.
Note: If we try to use vue template syntax {{ }} to render an html string, vue will be treated as a plain text instead of real html.
Rendering the HTML
Vue has a built-in v-htmldirective by using that we can render a html string.
The v-html directive is a vue version of browser innerHTML property.
Example:
<template> <div v-html="htmlString"></div></template><script>export default { data() { return { htmlString: "<h1 style='color:red'>Hello Gowtham</h1>", }; }};</script>This above code will render an h1 element with red color inside the div.
Note: By using the v-html directive you are vulnerable to cross-site scripting attacks(XSS), to prevent from it sanitize your html before passing it to v-html directive.
Hope this code and post will helped you for implement How to render a HTML string in Vue app. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs