时间戳

首页 > 解决方案 > 如何从使用 v-for 循环显示的项目的属性中呈现 HTML？

vue.js - 如何从使用 v-for 循环显示的项目的属性中呈现 HTML？

问题描述

我发送了一个对象数组，每个对象都有一个.html包含 HTML 文本的属性，例如<h1>...</h1>或<h2>...</h2>

我想让每个项目的 HTML 在 DOM 中一个接一个地显示，如下所示：

<h1>...</h1>
<h2>...</h2>
<h2>...</h2>
<h1>...</h1>
<h2>...</h2>

但是，所有这些尝试都不起作用：

  1. <div v-for="item in outlineItems" v-html="item.html"></div>

    • 显示包含在 div 中的 HTML：<div><h1>...</h1></div>和<div><h2>...</h2></div>

  2. <template v-for="item in outlineItems" v-html="item.html"></template>

    • 什么都不显示

  3. <template v-for="item in outlineItems">{{item.html}}</template>

    • 显示文字 HTML 而不是渲染它

  4. <template v-for="item in items"><template v-html="item.html"></template></template>

    • 什么都不显示

如何简单地显示.html每个项目的属性内容，以便呈现其中的 HTML，而不需要任何包装元素？

标签： vue.js

解决方案

您可以通过将所有 HTML 连接到计算属性中来使用单个包装元素来完成此操作：

new Vue({
  el: '#app',
  
  data () {
    return {
      outlineItems: [
        { html: '<h1>Heading 1</h1>' },
        { html: '<h2>Heading 2</h2>' },
        { html: '<h3>Heading 3</h3>' }
      ]
    }
  },
  
  computed: {
    outlineHtml () {
      return this.outlineItems.map(item => item.html).join('')
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div v-html="outlineHtml"></div>  
</div>

在幕后v-html设置innerHTML其对应的 DOM 节点。<template>标签不会创建 DOM 节点，因此innerHTML不能在任何地方设置。

我要补充一点，这v-html被认为是“逃生舱”。尽可能避免使用它，让 Vue 自己创建 HTML。通常，该方法是使用合适的数据结构来保存数据（而不是标记块），然后在模板中呈现该数据结构。

推荐阅读