Vue v-html 指令

示例

使用v-html指令输出包含的列表<ol>和<li>标签。

<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>

亲自试一试 »

请参阅下面的更多示例。

定义和用法

这个v-html指令用于将 HTML 标签和文本插入到元素中。

如果您尝试使用文本插值（使用花括号{{ }}），结果将只是一个文本字符串。请参阅上面的示例。

在单文件组件 (SFC) 中定义的范围样式使用<style scoped>不会影响 HTMLv-html指示。请参阅下面的第一个示例。

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

笔记：用户可以以某种方式指定其中包含的内容的页面v-html，面临跨站脚本 (XSS) 攻击的风险。

更多示例

示例1

使用范围样式，样式不适用于包含的 HTMLv-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.html?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 模块<style module>，代替<style scoped>，样式是有范围的，并且样式适用于包含在v-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 v-html 指令

示例

定义和用法

更多示例

示例1

示例2

相关页面