Chỉ thị Vue v-html
Ví dụ
Sử dụng lệnh v-html
để xuất danh sách chứa thẻ <ol>
và <li>
.
<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
Hãy tự mình thử »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-html
được sử dụng để chèn thẻ HTML và văn bản vào một phần tử.
Nếu bạn cố gắng xuất các thẻ HTML bằng cách sử dụng phép nội suy văn bản (sử dụng dấu ngoặc nhọn {{ }}
), kết quả sẽ chỉ là một chuỗi văn bản. Xem ví dụ trên.
Kiểu dáng có phạm vi được xác định trong Thành phần tệp đơn (SFC) bằng cách sử dụng <style scoped>
sẽ không ảnh hưởng đến HTML từ lệnh v-html
. Xem ví dụ đầu tiên bên dưới.
Để đạt được kiểu dáng có phạm vi cho HTML có trong v-html
trong SFC, chúng ta có thể sử dụng các mô-đun CSS với <style module>
. Xem ví dụ thứ hai bên dưới.
Lưu ý: Các trang mà người dùng bằng cách nào đó có thể ra lệnh cho nội dung được bao gồm trong v-html
có nguy cơ bị tấn công Tập lệnh chéo trang (XSS).
Thêm ví dụ
ví dụ 1
Khi sử dụng kiểu dáng có phạm vi, kiểu dáng đó không hoạt động đối với HTML có trong v-html
.
Sự cố này được khắc phục trong ví dụ tiếp theo.
<template>
<h1>Example</h1>
<p>When using scoped styling, styling for HTML included with the 'v-html' directive does not work.</p>
<p><a href="showvue.php?filename=demo_ref_v-html2_2">See the next example</a> for how we can fix this by using CSS Modules.</p>
<div v-html="htmlContent" id="htmlContainer"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: "<p>Hello from v-html</p>"
}
}
};
</script>
<style scoped>
#htmlContainer {
border: dotted black 1px;
width: 200px;
padding: 10px;
}
#htmlContainer > p {
background-color: coral;
padding: 5px;
font-weight: bolder;
width: 150px;
}
</style>
Chạy ví dụ »Ví dụ 2
Sử dụng Mô-đun CSS với <style module>
, thay vì <style scoped>
, kiểu dáng có phạm vi và kiểu dáng hoạt động cho HTML đi kèm với v-html
.
Vấn đề này trong ví dụ trước hiện đã được khắc phục.
<template>
<h1>Example</h1>
<p>Scoped styling for HTML included with the 'v-html' directive now works by using CSS Modules with 'style module', instead of 'style scoped'.</p>
<div v-html="htmlContent" :id="$style.htmlContainer"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: "<p>Hello from v-html</p>"
}
}
};
</script>
<style module>
#htmlContainer {
border: dotted black 1px;
width: 200px;
padding: 10px;
}
#htmlContainer > p {
background-color: coral;
padding: 5px;
font-weight: bolder;
width: 150px;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Nội suy văn bản