Afficher le HTML sans échappement dans Vue.js

191

Comment puis-je réussir à faire interpréter le HTML dans une reliure moustache? Au moment où le break ( <br />) est juste affiché / échappé.

Petite application Vue:

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>

javascript html vue.js

— Mike
source

1

faire du HTML sans échappement pour les sauts de ligne est exagéré, je voulais juste le mentionner! c'est un gros risque pour la sécurité

— Ryan Taylor

203

À partir de Vue2, les triples accolades sont obsolètes, vous devez les utiliser v-html.

<div v-html="task.html_content"> </div>

Le lien de documentation ne permet pas de savoir ce que nous sommes censés placer à l'intérieur v-html, vos variables y vont v-html.

En outre, v-htmlfonctionne uniquement avec <div>ou <span>mais pas avec <template>.

Si vous souhaitez voir cela en direct dans une application, cliquez ici .

— thewhitetulip
source

1

"mais pas avec <template>" est la partie importante ici si vous venez d'Angular.js et recherchez quelque chose comme<ng-include>

— domih

236

Vous pouvez utiliser la directive v-html pour l'afficher. comme ça:

<td v-html="desc"></td>

— 王开朗
source

3

Celui-ci fonctionne réellement en vue2. La première part de la compilation.

— Yauheni Prakopchyk

1

j'ai un problème avec v-html pour limiter le texte,? est-ce possible de limiter le texte en v-html? J'ai essayé, ça a échoué

— Zum Dummi

86

Vous pouvez le lire ici

Si tu utilises

{{<br />}}

il sera échappé. Si vous voulez du HTML brut, vous devez utiliser

{{{<br />}}}

EDIT (5 février 2017): Comme le souligne @hitautodestruct, dans la vue 2, vous devez utiliser v-html au lieu de triples accolades.

— zeratulmdq
source

1

Ouais, c'est même dans le docu. Merci.

— Mike

60

Veuillez noter que dans la vue 2.0, la triple moustache est obsolète, vous devez utiliser v-html à la place.

— hitautodestruct

5

Vue par défaut est livré avec la directive v-html pour l'afficher, vous le liez à l'élément lui-même plutôt que d'utiliser la liaison moustache normale pour les variables de chaîne.

Donc, pour votre exemple spécifique, vous auriez besoin de:

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

4

Vous devez utiliser la directive v-html pour afficher le contenu html dans un composant vue

<div v-html="html content data property"></div>

— Shair Haider
source