Web Front-end vue implements Interpolation of text and output of original html and vue Interpolation

Web Front-end vue implements Interpolation of text and output of original html and vue Interpolation

Vue. js uses the HTML-based template syntax, allowing developers to explicitly bind the DOM to the data of the underlying Vue instance. All Vue. js templates are legal HTML, so they can be parsed by compliant browsers and HTML Parser.

The most common data binding in vue is text interpolation using the "Mustache" syntax (double braces:

<Span> Message: {value }}</span> // interpolation text

At any time, the value Attribute of the bound data object changes, and the page will respond to the re-rendering.

Or sometimes you just want to update the page once. If you don't want to update the data every time, the page will be re-rendered. You can use the v-once Command to update the page at a time:

<Span v-once> this will not change: {value }}</span> // After the value of value is changed once, the page will not be re-rendered when the second change is made.

Sometimes, when you insert not just a text, for example, a rich text value, it contains a variety of text values and various original html tags, to be completely displayed on the page, you have to use the v-html command:

<Template> <div v-html = "htmlvalue"> </div> // call to display rich text, </template> <script> export default {data () {return {htmlvalue: '<span style = "color: red; "> the shoshould be red </span> '// For example, this is a rich text value }}</script>

Note: any HTML rendered dynamically on your site may be very dangerous because it can easily cause XSS attacks. Use only HTML interpolation for trusted content. Do not use interpolation for user-provided content.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.