Как я могу получить интерпретацию HTML внутри привязки усов? В настоящий момент break ( <br />
) просто отображается / экранируется.
Небольшое приложение 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 }
]
}
})
И вот шаблон:
<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
Майк
источник
источник
Ответы:
Начиная с Vue2, тройные скобки устарели, вы должны использовать
v-html
.<div v-html="task.html_content"> </div>
Из ссылки на документацию неясно, что именно мы должны разместить внутри
v-html
, ваши переменные входят внутрьv-html
.Также
v-html
работает только с<div>
или<span>
без<template>
.Если вы хотите увидеть это вживую в приложении, нажмите здесь .
источник
<template>
» важная часть здесь, если вы пришли из Angular.js и ищете что-то вроде<ng-include>
Вы можете использовать директиву v-html, чтобы показать это. как это:
источник
Вы можете прочитать это здесь
Если вы используете
это сбежит. Если вы хотите сырой HTML, вы должны использовать
РЕДАКТИРОВАТЬ (5 февраля 2017 г.): Как указывает @hitautodestruct, в vue 2 вы должны использовать v-html вместо тройных фигурных скобок.
источник
Vue по умолчанию поставляется с директивой v-html, чтобы показать его, вы привязываете его к самому элементу, а не используете обычную привязку усов для строковых переменных.
Так что для вашего конкретного примера вам понадобится:
источник
Вы должны использовать директиву v-html для отображения html-содержимого внутри компонента vue
источник