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> 在单个文件组件（SFCs）中定义的作用域样式不会影响 v-html 指令中的 HTML。请参阅下面的第一个实例。

为了在 SFC 中实现 v-html 中包含的 HTML 的范围样式，我们可以将 CSS 模块与 <style module> 一起使用。请参阅下面的第二个实例。

更多实例

实例 1

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

这个问题在下一个例子中得到了解决。

<template>
  <h1>实例1</h1>
  <p>当使用范围样式时，v-HTML 指令中包含的 HTML 样式不起作用.</p>
  <p><a href="#">看下一个实例</a> 了解我们如何通过使用 CSS 模块来解决这个问题。</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 模块与 <style module> 一起使用，而不是使用 <style scoped>，样式是有范围的，并且样式适用于 v-html 中包含的 HTML。

上一个例子中的这个问题现在已经解决。

<template>
  <h1>实例2</h1>
  <p>v-html 指令中包含的 HTML 的范围样式现在通过使用带有 style-module 的 CSS 模块而不是 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>