How to use v-html in vue

The v-html directive in Vue.js is used to: Insert raw HTML code, independent of the Vue compiler. Use the syntax:

, where htmlCode is a variable or expression that contains HTML code. Example:

Hello, World!

Note: v-html will overwrite the element

Usage of v-html in Vue

v-html in Vue.js Directives allow you to dynamically insert HTML code into your templates. It is used to insert raw HTML content that is not affected by the Vue compiler.

How to use

v-html The directive requires a variable or expression as a parameter that contains the HTML code to be inserted. The syntax is as follows:

<code class="html"><p v-html="htmlCode"></p></code>

where htmlCode is a variable or expression containing HTML code.

Example

<code class="html"><script>
import { ref } from 'vue';

export default {
  setup() {
    const html = ref('<p><h1>Hello, World!</h1></p>');

    return { html };
  },
};
</script>

<template>
  <div v-html="html"></div>
</template></code>

Note:

• v-html will overwrite the element Existing content, so please use with caution.
• Since v-html is inserted directly into HTML, make sure you trust the content you are inserting to avoid security issues. The
• v-html directive does not compile Vue compiler directives or expressions, so please do not use them in inserted HTML.
• If you need to insert dynamic content that is affected by the Vue compiler, consider using v-bind:innerHTML instead.

The above is the detailed content of How to use v-html in vue. For more information, please follow other related articles on the PHP Chinese website!