In Vue JS, the **`v-html` directive** is used to change the content of an HTML element. It is similar to the `DOM innerHtml` property. 

#    
## Syntax
`v-html` accepts a single parameter, data, as input and renders it into HTML.
```
v-html="data"
``` 

## Example


<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div>
			<h3>v-html directive</h3>
		</div>

		<div class="container">
			<div v-html="msg" id="app"></div>
		</div>
	</body>
</html>


var app = new Vue({
  el: '#app',
  data: {
    msg: `<h2>Hello <span style="color: red;">World!</span></h2>`
  }
})

body {
    text-align: center;
}

.container {
    background: #acacac; 
    width: 100%; 
    height: 100px;
}


codemirror

## Explanation
First, we created a `div` element with an id `app`, and applied the `v-html` directive to it with data as the input. 

Then, we created a message by initializing a new Vue instance with the data property containing our message.

What is the v-html directive in Vue JS?

In Vue JS, the v-html directive changes an element's content, akin to DOM's innerHtml property.