javascript - Hiển thị HTML chưa được thoát trong Vue.js

Làm thế nào để tôi có thể xử lý HTML bên trong một ràng buộc mustache? Hiện tại, ngắt dòng (<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à đâ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>

Câu trả lời #1

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

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

Câu trả lời #2

Bắt đầu từ Vue2, cú pháp ba ngoặc nhọn đã bị loại bỏ, bạn nên sử dụng v-html.

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

Từ liên kết tài liệu không rõ chúng ta nên đặt gì bên trong v-html, các biến của bạn được đặt bên trong v-html.

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

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

Câu trả lời #3

Bạn có thể đọc cái đó ở đây

Nếu bạn sử dụng

{{<br />}}

nó sẽ được thoát. Nếu bạn muốn html thô, bạn phải sử dụng

{{{<br />}}}

EDIT (ngày 5 tháng 2 năm 2017): Như @hitautodesturation đã chỉ ra, trong vue 2, bạn nên sử dụng v-html thay vì dấu ngoặc nhọn ba.

Câu trả lời #4

Bạn phải sử dụng directive v-html để hiển thị nội dung HTML bên trong một component của Vue

<div v-html="html content data property"></div>