Wyświetlacz Vue bez zmiany znaczenia html

Question

W jaki sposób udaje mi się uzyskać interpretację html w powiązaniu z wąsami? W tej chwili przerwa (<br />) jest wyświetlana/escaped.

Mała aplikacja 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 } 
    ] 
    } 
}) 

A oto szablon

<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> 

Answer 1

Możesz użyć dyrektywy v-html, aby ją wyświetlić. tak:

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

Answer 2

You can read that here

Jeśli używasz

{{<br />}} 

zostanie ona uciekła. Jeśli chcesz surowego html, musisz użyć

{{{<br />}}} 

edycji (5 lutego 2017): Jak @hitautodestruct wskazuje w v2 trzeba zastosować v-html zamiast potrójnymi klamrami.

Answer 3

Począwszy Vue2, potrójne szelki były przestarzałe, jesteś w użyciu v-html.

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

Nie jest jasne od documentation link, co mamy się umieścić wewnątrz v-html, swoje zmienne idzie wewnątrz v-html.

Również v-html działa tylko z <div> lub <span>, ale nie z <template>.

Jeśli chcesz zobaczyć to na żywo w aplikacji, kliknij here.