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 教程：文本插值
