Affichage sans échappement HTML dans Vue.js
Comment puis-je gérer pour obtenir HTML interprété à l'intérieur d'une moustache de liaison? Au moment de la pause (<br />
) est seulement de affiche/a échappé.
Petite Vue de l'app:
var logapp = new Vue({
el: '#logapp',
data: {
title: 'Logs',
logs: [
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 },
{ status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }
]
}
})
Et voici le modèle:
<div id="logapp">
<table>
<tbody>
<tr v-repeat="logs">
<td>{{fail}}</td>
<td>{{type}}</td>
<td>{{description}}</td>
<td>{{stamp}}</td>
<td>{{id}}</td>
</tr>
</tbody>
</table>
</div>
- faire sans échappement HTML pour des sauts de lignes, c'est du matraquage, je voulais juste dire que! c'est un gros risque de sécurité
Vous devez vous connecter pour publier un commentaire.
De départ avec Vue2, les triples accolades ont été désapprouvées, vous êtes à utiliser
v-html
.<div v-html="task.html_content"> </div>
Il est difficile de le documentation lien à ce que nous sommes censés place à l'intérieur de
v-html
, les variables se passe à l'intérieurv-html
.Aussi,
v-html
fonctionne uniquement avec<div>
ou<span>
mais pas avec<template>
.Si vous voulez voir ça de vivre dans une application, cliquez sur ici.
<template>
" est la partie importante ici si vous venez de Angular.js et de regarder pour quelque chose comme<ng-include>
Vous pouvez utiliser la directive v-html pour l'afficher.
comme ceci:
Vous pouvez lire ça ici
Si vous utilisez
ça va être échappé. Si vous voulez du html brut, tu dois utiliser
MODIFIER (5 Fév 2017): Comme @hitautodestruct souligne, en vue 2, vous devriez utiliser v-html au lieu de triple accolades.
Vue par défaut fourni avec le v-directive html pour l'afficher, vous liez sur l'élément lui-même plutôt que d'utiliser la normale moustache de liaison pour les variables de chaîne de caractères.
Donc, pour votre exemple, il vous faudrait:
Vous devez utiliser le v-directive html pour l'affichage du contenu html à l'intérieur d'une vue de composant