Tại thời điểm này, tin tốt là chúng ta đã bao gồm hầu hết tất cả các tính năng và chức năng quan trọng liên quan đến việc xuất dữ liệu, cụ thể là Interpolation và Directive v-bind. Ngoài ra, kết hợp với kiến thức mà bạn có thể xuất ra dữ liệu hoặc kết quả của các lệnh gọi phương thức giống như chúng ta đã làm trong những bài trước đây. Bây giờ có thêm một tính mới đó là directive v-html, directive v-html cho phép bạn render một biến dữ liệu thành HTML thực sự trong template. Điều này có ý nghĩa là bạn có thể chèn HTML được lấy từ dữ liệu của bạn mà không cần escape (tránh mã hóa HTML).

Ví dụ, giả sử bạn có một biến dữ liệu goalContentB trong đối tượng data của bạn và muốn render nó thành HTML thực tế trong template của bạn:

data() {
    return {
        goalContentA: 'Finish the course and learn Vue!',
        goalContentB: '<p>Finish the course and learn Vue!</p>',
    }
},

Trong template của bạn, bạn có thể sử dụng v-html để render goalContentB:

<section id="user-goal">
  <div v-html="goalContentB"></div>
</section>

Khi Vue.js thực thi template này, nội dung của goalContentB sẽ được hiển thị trong thẻ <div> và các thẻ HTML trong biến dữ liệu sẽ được hiển thị mà không cần escape.

Tuy nhiên, cần chú ý rằng việc sử dụng v-html có thể tạo ra lỗ hổng bảo mật nếu dữ liệu đầu vào không được kiểm tra kỹ lưỡng. Bạn nên chỉ sử dụng v-html cho dữ liệu mà bạn tin tưởng, hoặc dữ liệu mà bạn đã kiểm tra và xác thực trước đó để tránh các cuộc tấn công XSS (Cross-Site Scripting).