Comment saisir du HTML dans vue

Dans Vue, vous pouvez utiliser la directive v-html pour insérer du code HTML dans les éléments DOM.

Le format syntaxique de la directive v-html est : "v-html = 'Code HTML'". Dans cette directive, le code HTML est une expression, qui peut être un attribut de données de l'instance Vue ou un attribut calculé.

La directive v-html a de nombreux scénarios d'utilisation. Par exemple, lorsque nous devons restituer dynamiquement du contenu, nous pouvons utiliser la directive v-html.

Voici un exemple qui montre comment utiliser la directive v-html dans Vue :

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

<script>
export default {
  data() {
    return {
      content: '<h1>Hello world</h1>',
    }
  },
}
</script>

Dans cet exemple, nous définissons un composant Vue qui utilise la directive v-html pour insérez le code HTML dans l'attribut content data dans l'élément div. La valeur de l'attribut de contenu défini dans data est "4a249f0d628e2318394fd9b75b4636b1Hello world473f0a7621bec819994bb5020d29372a".

Lorsque nous exécutons ce composant, le titre "Hello world" sera affiché sur la page. C'est ce que réalise la directive v-html.

Il convient de noter que puisque la directive v-html insérera le code HTML directement dans l'élément DOM, vous devez vous assurer que le code HTML est sûr. Si le code HTML provient d'une entrée de l'utilisateur, certains filtres personnalisés doivent être utilisés pour filtrer le code HTML afin d'éviter les attaques de scripts intersites (XSS).

En bref, v-html est une commande très pratique dans Vue, qui peut nous aider à restituer le contenu de la page plus facilement. Cependant, vous devez faire attention aux problèmes de sécurité pour éviter les attaques XSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!