Hiển thị HTML không thoát trong Vue.js

188

Làm cách nào tôi có thể quản lý để có được HTML diễn giải trong một ràng buộc ria mép? Tại thời điểm break ( <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>

javascript html vue.js

— Mike
nguồn

1

làm HTML không được giải thích cho ngắt dòng là quá mức cần thiết, chỉ muốn đề cập đến điều đó! đó là một rủi ro bảo mật lớn

— Ryan Taylor

200

Bắt đầu với Vue2, bộ ba niềng răng không được dùng nữa, bạn sẽ sử dụng v-html.

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

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

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

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

— thewhitetulip
nguồn

1

"nhưng không phải với <template>" là phần quan trọng ở đây nếu bạn đến từ Angular.js và tìm kiếm một cái gì đó như<ng-include>

— domih

235

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

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

— 王开朗
nguồn

3

Đó là một trong những thực sự hoạt động trong vue2. Đầu tiên một trows trên biên dịch.

— Yauheni Prakopchyk

1

tôi có một vấn đề với v-html để giới hạn văn bản ,? Có thể giới hạn văn bản trong v-html không? tôi đã thử, nó đã thất bại

— Zum Dummi

86

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

Nếu bạn dùng

{{<br />}}

nó sẽ được trốn 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ì ba dấu ngoặc nhọn.

— zeratulmdq
nguồn

1

Vâng, nó thậm chí trong tài liệu. Cảm ơn.

— Mike

60

Xin lưu ý rằng trong vue 2.0, bộ ria mép đã bị phản đối, bạn nên sử dụng v-html thay thế.

— hitautodesturation

5

Vue theo mặc định gửi với lệnh v-html để hiển thị nó, bạn liên kết nó với chính phần tử thay vì sử dụng liên kết ria mép bình thường cho các biến chuỗi.

Vì vậy, ví dụ cụ thể của bạn, bạn sẽ cần:

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

4

Bạn phải sử dụng chỉ thị v-html để hiển thị nội dung html bên trong thành phần vue

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

— Shair Haider
nguồn