Jak mogę interpretować HTML w powiązaniu wąsów? W tej chwili funkcja break ( <br />
) jest właśnie wyświetlana / wybierana.
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>
javascript
html
vue.js
Mikrofon
źródło
źródło
Odpowiedzi:
Począwszy od Vue2, potrójne nawiasy klamrowe były przestarzałe, należy ich użyć
v-html
.<div v-html="task.html_content"> </div>
Z linku dokumentacji nie jest jasne, co mamy w środku umieścić
v-html
, twoje zmienne wchodzą do środkav-html
.Ponadto,
v-html
działa tylko z<div>
lub<span>
ale nie<template>
.Jeśli chcesz zobaczyć to na żywo w aplikacji, kliknij tutaj .
źródło
<template>
” jest tutaj ważną częścią, jeśli pochodzisz z Angular.js i szukasz czegoś takiego<ng-include>
Aby to pokazać, możesz użyć dyrektywy v-html. lubię to:
źródło
Możesz to przeczytać tutaj
Jeśli użyjesz
ucieknie. Jeśli chcesz surowy HTML, musisz użyć
EDYCJA (5 lutego 2017 r.): Jak wskazuje @hitautodestruct, w vue 2 powinieneś używać v-html zamiast potrójnych nawiasów klamrowych.
źródło
Vue domyślnie jest dostarczany z dyrektywą v-html, aby go pokazać, wiążesz go z samym elementem zamiast używać normalnego wiązania wąsów dla zmiennych łańcuchowych.
Tak więc dla twojego konkretnego przykładu potrzebujesz:
źródło
Musisz użyć dyrektywy v-html do wyświetlania treści HTML wewnątrz komponentu vue
źródło