Visualizza HTML senza caratteri di escape in Vue.js

191

Come posso riuscire a far interpretare l'HTML all'interno di un baffo? Al momento la pausa ( <br />) è appena visualizzata / scappata.

Piccola app 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  }
    ]
  }
})

Ed ecco il modello:

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

1

fare HTML senza escape per le interruzioni di riga è eccessivo, volevo solo menzionarlo! è un grosso rischio per la sicurezza

— Ryan Taylor, l'

203

A partire da Vue2, le triple parentesi sono state deprecate, devi usarle v-html.

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

Non è chiaro dal collegamento della documentazione su cosa dovremmo collocare all'interno v-html, le tue variabili vanno dentro v-html.

Inoltre, v-htmlfunziona solo con <div>o <span>ma non con <template>.

Se vuoi vederlo dal vivo in un'app, fai clic qui .

— thewhitetulip
fonte

1

"Ma non con <template>" è la parte importante qui se vieni da Angular.js e cerchi qualcosa di simile<ng-include>

— domih

236

È possibile utilizzare la direttiva v-html per mostrarlo. come questo:

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

— 王开朗
fonte

3

Quello in realtà funziona in vue2. Il primo inizia la compilazione.

— Yauheni Prakopchyk,

1

ho un problema con v-html per limitare il testo,? è possibile limitare il testo in v-html? ho provato, non è riuscito

— Zum Dummi

86

Puoi leggerlo qui

Se usi

{{<br />}}

sarà evaso. Se vuoi HTML grezzo, devi usare

{{{<br />}}}

EDIT (5 febbraio 2017): Come sottolinea @hitautodestruct, in vue 2 dovresti usare v-html invece di triple parentesi graffe.

— zeratulmdq
fonte

1

Sì, è anche nel documento. Grazie.

— Mike,

60

Si noti che in vue 2.0 i baffi tripli sono stati deprecati, è necessario utilizzare v-html .

— Hitautodestruct,

5

Vue di default viene fornito con la direttiva v-html per mostrarlo, lo si collega all'elemento stesso anziché utilizzare il normale baffo per le variabili stringa.

Quindi per il tuo esempio specifico avresti bisogno di:

<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

Devi usare la direttiva v-html per visualizzare il contenuto html all'interno di un componente vue

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

— Shair Haider
fonte