How to use v-html on the vue.js?

by aniya.jaskolski , in category: Javascript , 2 months ago

How to use v-html on the vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lily , 2 months ago

@aniya.jaskolski 

In Vue.js, the v-html directive is used to render raw HTML directly to the DOM. Here is an example of how to use the v-html directive in a Vue template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div>
    <!-- Render the raw HTML using v-html -->
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<h1>Hello, World!</h1>'
    };
  }
};
</script>


In the above code snippet, the htmlContent data property contains an HTML string that will be rendered within the div element using the v-html directive. The HTML content specified in htmlContent will be inserted directly into the DOM, so make sure to sanitize any user-generated content to prevent XSS attacks.