Vue.js でエスケープされていない HTML コンテンツをレンダリングする

Question

<p>ヒゲバインディングで HTML コードを解析するにはどうすればよいですか?現在、改行文字 (<code><br /></code>) は表示/エスケープのみされます。 </p> <p>小さな Vue アプリケーション:</p> <pre class="brush:php;toolbar:false;">var logapp = new Vue({ el: '#logapp', データ： { タイトル: 「ログ」、 ログ: [ { ステータス: true、タイプ: 'インポート'、説明: 'JavaScript を学ぶ'、日付: '11.11.2015'、id: 1 }, { ステータス: true、タイプ: 'インポート'、説明: 'JavaScript を学ぶ'、日付: '11.11.2015'、id: 1 } ] } })</pre> <p>以下はテンプレートです: </p> <pre class="brush:php;toolbar:false;"><div id="logapp"> <テーブル> <みんな> <tr v-repeat="ログ"> <td>{{失敗}}</td> <td>{{タイプ}}</td> <td>{{説明}}</td> <td>{{スタンプ}}</td> <td>{{id}}</td> </tr> </tbody> </テーブル> </div><<

Answer 1

Vue2 以降、3 つの中括弧は非推奨になりました。v-html を使用する必要があります。

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

ドキュメントのリンク からは明確ではありません v-html に何を入れるべきか、変数は v-html に入れる必要があります。

また、

v-html は、<div> または <span> でのみ機能し、<template> では機能しません。 。

アプリ内でライブで確認したい場合は、

ここをクリックしてください。

Answer 2

v-html ディレクティブを使用して表示できます。 このような：＃＃＃ リーリー