Hiển thị Vue unescaped html

Question

Làm cách nào tôi có thể quản lý để nhận html được diễn giải bên trong một ràng buộc bộ ria mép? Tại thời điểm nghỉ (<br />) chỉ được hiển thị/thoát.

ứng dụng vue nhỏ

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 } 
    ] 
    } 
}) 

Và dưới đây là mẫu

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

Answer 1

Bạn có thể sử dụng chỉ thị v-html để hiển thị nó. như thế này:

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

Answer 2

You can read that here

Nếu bạn sử dụng

{{<br />}} 

nó sẽ được thoát. Nếu bạn muốn html liệu, bạn gotta sử dụng

{{{<br />}}} 

EDIT (05 Tháng Hai 2017): Là @hitautodestruct chỉ ra, trong v2 bạn nên sử dụng v-html thay vì dấu ngoặc nhọn ba.

Answer 3

Bắt đầu với Vue2, dấu ngoặc ba đã bị phản đối, bạn đang sử dụng v-html.

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

Không rõ từ documentation link như những gì chúng tôi có nghĩa vụ phải đặt bên trong v-html, các biến của bạn đi bên v-html.

Ngoài ra, v-html chỉ hoạt động với <div> hoặc <span> nhưng không phải với <template>.

Nếu bạn muốn xem điều này trực tiếp trong ứng dụng, hãy nhấp vào here.