Directiva v-html în Vue 3 în Vue.js & Nuxt

Ce este directiva v-html

În mod normal, interpolarea cu acolade duble {{ text }} tratează conținutul ca text simplu și îl curăță automat împotriva injecțiilor de cod. Dacă aveți nevoie să afișați conținut generat de un editor WYSIWYG cu formatări HTML (paragrafe, liste, text îngroșat), directiva v-html setează proprietatea innerHTML a nodului DOM.

Atenție: Folosiți întotdeauna o bibliotecă de igienizare (precum DOMPurify) dacă markup-ul provine de la utilizatori externi pentru a preveni atacurile XSS.

<template>
  <article v-html="articolHtml" class="continut-articol"></article>
</template>

<script setup>
import { ref } from 'vue';
const articolHtml = ref('<p>Acesta este un <strong>articol</strong> cu formatare HTML.</p>');
</script>