The difference between a V-text directive and a V-HTML directive:

1. Interpolation

2. V-text instruction

However, if the data we are presenting contains the element tag or style, and we want to show the effect of the attribute defined by the tag or style, how to render it, for example:

This is an H1 element content

Copy the code

{{ msg }}

<script type="text/javascript"> var vm = new Vue({el: "#app", data: {MSG: "<h1> this is a h1 element content </h1>}}); </script>Copy the code

Conclusion: Interpolation expressions and V-text instructions are parsed directly as string elements. Vue provides another directive for this: V-html

Copy the code

{{ msg }}

<script type="text/javascript"> var vm = new Vue({el: "#app", data: {MSG: "<h1> this is a h1 element content </h1>}}); </script>Copy the code

Duplicate code run result:

The tag attributes were successfully resolved.