web-dev-qa-db-fra.com

Afficher du HTML non échappé dans Vue.js

Comment puis-je réussir à faire interpréter le code HTML dans une liaison moustache? Au moment où la pause (<br />) est simplement affichée/échappée.

Petite Vue 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>
javascripthtmlvue.js
151
Mike

À partir de Vue2, les triples accolades étaient obsolètes. Vous devez utiliser v-html.

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

Le lien vers la documentation ne dit pas clairement ce que nous sommes censés placer dans v-html, vos variables vont dans v-html.

De plus, v-html ne fonctionne qu'avec <div> ou <span> mais pas avec <template>.

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

135
thewhitetulip

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

<td v-html="desc"></td>
225
王开朗

Vous pouvez le lire ici

Si tu utilises

{{<br />}}

ça va être échappé. Si vous voulez du HTML brut, vous devez utiliser

{{{<br />}}}

EDIT (5 février 2017): Comme l'indique @hitautodestruct, dans vue 2 vous devriez utiliser v-html au lieu de triple accolade.

84
zeratulmdq

Vue par défaut est livré avec la directive v-html pour l'afficher, vous le liez sur 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 aurez 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
user10261970

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

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