検索

ホームページ  >  に質問  >  本文

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

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

P粉253518620P粉253518620491日前623

全員に返信(2)返信します

  • P粉939473759

    P粉9394737592023-08-22 17:15:45

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

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

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

    また、

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

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

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

    返事
    0
  • P粉399090746

    P粉3990907462023-08-22 15:03:22

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

    返事
    0
  • キャンセル返事