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 的范围样式，我们可以将 CSS 模块与 <style module> 结合使用。请参阅下面的第二个示例。

注意:用户可以以某种方式指定 v-html 中包含的内容的页面面临跨站点脚本 (XSS) 攻击的风险。

更多示例

示例 1

使用范围样式，该样式不适用于 v-html 中包含的 HTML。

此问题将在下一个示例中得到解决。

<template>
  <h1>示例</h1>
  <p>When using scoped styling, styling for HTML included with the 'v-html' directive does not work.</p>
  <p><a href="showvue.asp?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>（而不是 <style scoped>）的 CSS 模块，样式具有范围，并且样式适用于 v-html 中包含的 HTML。

上一个示例中的问题现已修复。

<template>
  <h1>示例</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>

运行示例 »