Vue v-html 指令
示例
使用 v-html 指令来输出包含 <ol> 和 <li> 标签的列表。
<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
尝试一下 »
查看下面的更多示例。
定义和用法
v-html 指令用于将 HTML 标签和文本插入元素中。
如果尝试使用文本插值（使用花括号 {{ }}）来输出 HTML 标签，则结果将只是一个文本字符串。查看上面的示例。
使用 <style scoped> 在单文件组件 (SFC) 中定义的局部样式不会影响来自 v-html 指令的 HTML。查看下面的第一个示例。
为了在 SFC 中使用 v-html 包含的 HTML 实现局部样式，我们可以使用带有 <style module> 的 CSS 模块。查看下面的第二个示例。
注意： 用户可以以某种方式决定使用 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
使用带有 <style module> 的 CSS 模块，而不是 <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 教程：文本插值
