V-HTML - Render RAW HTML

As you have seen in the v-text directive, it do not render the HTML tag while printing. And thanks to v-html directive which supports HTML rendering.

		<div v-html="htmlcontent"></div>
		data : {
			htmlcontent : "<span style='color:red;'>Hello</span>"
		}
	

And it will produce the following result -

Well, one thing you have to be very careful about. Do not use v-html for user data. Well, it's just a coution. For example, if a user writes CSS inside and text box and you store it in the DB. Then you fetch the value from the DB and display them using v-html directive. Well those user CSS will be rendered. But don't worry JS won't run. But still, you will have the risk if you use any Style inside the v-html directive.

		<span v-html="htmlcontent"></span>
		data : {
		htmlcontent : `<style>
				body{
					background-color:red;
				}
			</style>`,
		}	
	

This will change the background color of body to red.

Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.