首頁  >  問答  >  主體

Vue.js中呈現未轉義的HTML內容

<p>如何在mustache綁定中解析HTML程式碼?目前換行符號(<code><br /></code>)只會被顯示/轉義。 </p> <p>小型Vue應用:</p> <pre class="brush:php;toolbar:false;">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 } ] } })</pre> <p>以下是範本:</p> <pre class="brush:php;toolbar:false;"><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></pre></p>
P粉253518620P粉253518620449 天前581

全部回覆(2)我來回復

  • P粉939473759

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

    從Vue2開始,三個大括號被棄用了,你需要使用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 指令來顯示它。 像這樣:

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

    回覆
    0
  • 取消回覆