Vue v-html Directive
Example
Using thev-html directive to output a list containing<ol> and<li> tags.
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
See more examples below.
Definition and Usage
Thev-html directive is used to insert HTML tags and text into an element.
If you try to output HTML tags using text interpolation (using curly braces{{ }}), the result will be just a text string. See the example above.
Scoped styling defined in Single-File Components (SFCs) using<style scoped> will not affect HTML from thev-html directive. See the first example below.
To achieve scoped styling for HTML included withv-html in SFCs we can use CSS modules with<style module>. See the second example below.
Note:Pages where users can somehow dictate the content that is included withv-html, are at risk of Cross-site scripting (XSS) attacks.
More Examples
Example 1
Using scoped styling, the styling does not work for HTML included withv-html.
This problem is fixed in the next example.
<template> <h1>Example</h1> <p>When using scoped styling, styling for HTML included with the 'v-html' directive does not work.</p> <p><a href="showvue.php?filename=demo_ref_v-html2_2">See the next example</a> for how we can fix this by using CSS Modules.</p> <div v-html="htmlContent" id="htmlContainer"></div></template><script>export default { data() { return { htmlContent: "<p>Hello from v-html</p>" } }};</script><style scoped> #htmlContainer { border: dotted black 1px; width: 200px; padding: 10px; } #htmlContainer > p { background-color: coral; padding: 5px; font-weight: bolder; width: 150px; }</style>Example 2
Using CSS Modules with<style module>, instead of<style scoped>, the styling is scoped and the styling works for HTML included withv-html.
This problem in the previous example is now fixed.
<template> <h1>Example</h1> <p>Scoped styling for HTML included with the 'v-html' directive now works by using CSS Modules with 'style module', instead of 'style scoped'.</p> <div v-html="htmlContent" :id="$style.htmlContainer"></div></template><script>export default { data() { return { htmlContent: "<p>Hello from v-html</p>" } }};</script><style module> #htmlContainer { border: dotted black 1px; width: 200px; padding: 10px; } #htmlContainer > p { background-color: coral; padding: 5px; font-weight: bolder; width: 150px; }</style>Related Pages
Vue Tutorial:Text Interpolation
