Comment afficher le HTML original dans vue ?

Cet article présente principalement la vue frontale Web pour implémenter du texte interpolé et générer du HTML original. Maintenant, je le partage avec vous et le donne comme référence.

Vue.js utilise une syntaxe de modèle basée sur HTML, permettant aux développeurs de lier de manière déclarative le DOM aux données de l'instance Vue sous-jacente. Tous les modèles Vue.js sont du HTML légal, ils peuvent donc être analysés par les navigateurs et les analyseurs HTML qui suivent la spécification.

La liaison de données la plus courante dans vue est l'interpolation de texte utilisant la syntaxe "Moustache" (doubles accolades) :

<span>Message: {{ value }}</span> // 插值文本

À chaque fois, la valeur sur l'objet de données lié. Lorsque les attributs changent, la page sera restitué en conséquence.

Ou parfois, vous souhaitez simplement mettre à jour une fois et ne souhaitez pas mettre à jour les données et restituer la page à chaque fois. Vous pouvez également effectuer une mise à jour unique via la commande v-once :

<span v-once>这个将不会改变: {{ value }}</span> 
// value的值改变了一次后，第二次改变时就不会再重新渲染页面

Oui Lorsque vous insérez autre chose qu'un seul texte, comme une valeur de texte enrichi, il contient diverses valeurs de texte et diverses balises HTML originales. Pour l'afficher complètement sur la page, vous devez utiliser. la commande v-html. :

<template>
 <p v-html="htmlvalue"></p> // 调用显示富文本，将会按照原始的html显示
</template>
<script>
export default {
 data(){
 return{
  htmlvalue: &#39;<span style="color:red;">the should be red</span>&#39; // 比如：这是一个富文本的值
 }
 }
}
</script>

Remarque : Le rendu dynamique du HTML arbitraire sur votre site peut être très dangereux car cela peut facilement conduire à des attaques XSS. Utilisez uniquement l'interpolation HTML pour le contenu fiable et jamais pour le contenu fourni par l'utilisateur.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser l'applet WeChat pour obtenir l'effet de zone de saisie du numéro MUI

Comment implémenter le panneau pliable dans l'applet WeChat

Comment utiliser le composant de curseur de galerie dans l'applet WeChat

Utilisation de base de la fonction de rendu dans Vue (tutoriel détaillé)

Comment utiliser le composant scroll-view pour implémenter une animation de défilement dans le mini programme WeChat

À propos de l'utilisation du composant case à cocher dans le mini WeChat programme

Comment calculer le centroïde du polygone en JavaScript

Comment utiliser le sélecteur de commutateur dans l'applet WeChat

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!