v-text
This directive accepts as an argument a variable representing the text with which the entire content of the tag should be updated. It has the same functionality as string interpolation.
See the Pen v-text by Web programming (@chos) on CodePen.
v-html
By using this directive, we enable content to be inserted as plain HTML, ie. Vue.js will not process it as if it were a template compiler. The problem can occur with “single-file component“, because the styles from the component will not affect the content inserted with this directive.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Hello!</h1>' } }); </script> |
When to use the v-html directive?
Dynamic rendering of arbitrary HTML can be very dangerous, as it can easily lead to XSS attacks. It is recommended that the “v-html” directive be used only for trusted content, which implies that it should never be used for user-input content. One reason to use this directive is to inject unicode code (eg 😸 HTML processed and generated in 😸)
|
1 2 |
<div>😸</div> je ustvari <div>😸</div> |
Example
See the Pen v-text by Web programming (@chos) on CodePen.
v-before
The content of the HTML tag containing the “v-pre” directive will not be processed and compiled by Vue.js, but will be displayed exactly as written in the code itself.
Example
On an element that has the directive “v-pre” no interpolation will be performed, but double brackets will be displayed.
See the Pen V-pre by Web programming (@chos) on CodePen.