Comment échapper à l'événement click dans le code HTML de vue

Dans Vue, nous utilisons généralement la directive v-on pour lier les événements de clic, par exemple :

<button v-on:click="handleClick">点击我</button>

Ce code indique que lorsque l'on clique sur ce bouton, une méthode nommée handleClick sera exécutée. .

Cependant, dans certains cas, nous devons afficher certains caractères ayant une signification particulière en HTML, comme le signe inférieur à (<) ou le signe de comparaison (&). Ces caractères peuvent être interprétés par le navigateur comme des balises ou des entités HTML, provoquant des problèmes d'affichage.

Pour éviter cette situation, nous devons échapper à ces personnages. Vue fournit une méthode intégrée pour réaliser cette fonction, la directive v-html.

En utilisant la directive v-html, nous pouvons restituer le code HTML en éléments HTML, par exemple :

<div v-html="htmlCode"></div></p>
<p>Ce code signifie que le code HTML stocké dans la variable htmlCode sera rendu dans un élément div. </p>
<p>Cependant, lorsque nous utilisons la directive v-html, en raison de problèmes de sécurité, Vue interdira par défaut le rendu de tout code JavaScript ou de liaisons d'événements qu'il contient. Il s’agit d’empêcher les attaques XSS de se produire. </p>
<p>Si nous avons vraiment besoin d'utiliser du code JavaScript ou de lier des événements en HTML, nous devons utiliser une autre instruction v-once fournie par Vue pour empêcher Vue de compiler le contenu. </p>
<p>Par exemple, si nous voulons afficher un bouton en HTML qui contient un événement de clic, nous pouvons utiliser les directives v-html et v-once comme suit : </p>
<pre class="brush:php;toolbar:false"><div v-html="`<button v-once v-on:click='${()=>console.log("clicked")}'></button>`"></div>

Ce code représente le rendu d'un bouton contenant un événement de clic en HTML.

Il convient de noter qu'en raison de problèmes de sécurité, il n'est pas recommandé d'utiliser le code JavaScript et la liaison d'événements directement dans le code HTML, en particulier lorsque le contenu rendu provient d'une saisie utilisateur. Dans ce cas, il est préférable de gérer la logique d'une autre manière, par exemple en utilisant des composants ou des méthodes associées.

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!