Rendu du contenu HTML non échappé dans Vue.js

Question

Comment analyser le code HTML dans la liaison moustache ? Actuellement, les caractères de nouvelle ligne (
) seront uniquement affichés/échappés.

Application Small Vue :

var logapp = new Vue({
  el : '#logapp',
  données: {
    titre : 'Journaux',
    journaux : [
      { status : true, tapez : 'Importer', desc : 'Learn<br />JavaScript', date : '11.11.2015', id : 1 },
      { status : true, tapez : 'Importer', desc : 'Learn<br />JavaScript', date : '11.11.2015', id : 1 }
    ]
  }
})</pré>

<p>Voici le modèle : </p>

<pre class="brush:php;toolbar:false;"><div id="logapp">
    <tableau>
        <corps>
            <tr v-repeat="logs">
                <td>{{échec}}</td>
                <td>{{type}}</td>
                <td>{{description}}</td>
                <td>{{stamp}}</td>
                <td>{{id}}</td>
            ≪/tr>
        </tcorps>
    </tableau>
</div>

Answer 1

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

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

Le lien de documentation ne montre pas clairement ce que nous devons mettre dans v-html中放置什么，你的变量应该放在v-html, vos variables doivent être placées dans

.

v-html只适用于<div>或<span>，而不适用于<template>De plus,

ne s'applique qu'à <div> ou <span>, pas à <template>.

Si vous souhaitez le voir en direct dans l'application, cliquez ici

. 🎜

Answer 2

Vous pouvez utiliser la commande v-html pour l'afficher. Comme ça :

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