Vue v-html 指令
示例
使用 v-html 指令輸出一個包含 <ol> 和 <li> 標籤的列表。
<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
自己動手試一試 »
更多示例請參見下方。
定義和用法
v-html 指令用於將 HTML 標籤和文字插入到元素中。
如果您嘗試使用文字插值（使用花括號 {{ }}）輸出 HTML 標籤，結果將只是一段文字字串。請參見上面的示例。
在單檔案元件 (SFC) 中使用 <style scoped> 定義的作用域樣式不會影響來自 v-html 指令的 HTML。請參見下面的第一個示例。
要在 SFC 中為透過 v-html 包含的 HTML 實現作用域樣式，我們可以使用 CSS 模組和 <style module>。請參見下面的第二個示例。
注意： 使用者可以透過某種方式控制透過 v-html 包含的內容的頁面，存在跨站指令碼 (XSS) 攻擊的風險。
更多示例
示例 1
使用作用域樣式，對於透過 v-html 包含的 HTML，樣式不起作用。
這個問題在下一個示例中得到了解決。
<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>
示例 2
使用 CSS Modules 和 <style module>，而不是 <style scoped>，樣式是作用域化的，並且樣式對於透過 v-html 包含的 HTML 有效。
上一個示例中的問題現在已得到解決。
<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>
相關頁面
Vue 教程：文字插值
