Hiển thị HTML thô trong ứng dụng Vue của bạn

---

Mặc dù nó không thường xuyên như vậy, nhưng đôi khi thực sự có một lý do chính đáng để cần chèn HTML thô được lưu trữ dưới dạng chuỗi vào DOM. Tất nhiên là rất hiếm. Trong hầu hết các trường hợp, bạn không bao giờ nên làm điều này, vì điều này mở ra cho bạn nhiều loại tấn công XSS. Một trường hợp sử dụng hơi hợp lệ có thể là nếu bạn đang viết một thành phần giao diện user mới cho một hệ thống kế thừa cổ xưa ( rùng mình ) lưu trữ HTML trộn với dữ liệu trong database cũ trong phòng server đã bị lãng quên từ lâu ở một cơ sở cho thuê nào đó ở ngoại ô. Trong trường hợp đó, bạn có thể phải dùng đến cách hiển thị HTML thô trong ứng dụng của bạn .

Vậy hãy bắt đầu. Điều đầu tiên, hãy khám phá các kỹ năng RegEx của bạn…

Chỉ đùa thôi. Tôi không muốn mạo hiểm số phận của vũ trụ đã biết chỉ để chứa một hệ thống kế thừa.

Dù sao, hóa ra Vue cung cấp cho ta một chỉ thị nhỏ rất hay có thể xử lý tất cả những điều này cho ta . Có thể dự đoán, nó được gọi là v-html .

Để sử dụng nó, hãy chuyển một tham chiếu đến một chuỗi HTML trong mô hình dữ liệu tới v-html trong mẫu thành phần của bạn, như sau:

<template>
  <div v-html="legacySystemHTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Just like JSX! Oh wait...
      legacySystemHTML: `
        <FONT color="#faddad" size="-2">
          <MARQUEE>Please enter your name to continue.</MARQUEE>
          ...
        </FONT>
      `
    }
  }
}
</script>

Và cứ như vậy, HTML của bạn sẽ được kết xuất vào thành phần. Nếu bạn cập nhật thuộc tính legacySystemHTML , HTML sẽ cập nhật tương ứng.

Không tệ!

---

Ngoài ra, đây là một bí mật hơi liên quan. Bạn có thể sử dụng thuộc tính v-text theo cách tương tự, ngoại trừ nó chỉ đặt nội dung văn bản của một phần tử.

…

Không hiểu tại sao bạn lại sử dụng nó khi bạn chỉ có thể sử dụng biểu thức Mustache ( {{ componentInnerText }} ), nhưng nó ở đó!

---

---

Các tin liên quan

Nén HTML của bạn trong Jekyll
2017-01-17
Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
2016-10-21
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML
2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07