时间戳

首页 > 解决方案 > 来自对象的 vue 插槽和 HTML

javascript - 来自对象的 vue 插槽和 HTML

问题描述

我的 vue 组件中有一些看起来像这样的数据，

items: [
        {
          slug: 'this-is-title-1',
          title: 'This is title 1',
          content:
            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et diam quis sem mollis viverra quis sed arcu. Nulla id nulla mollis tortor eleifend aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse quam ipsum, egestas sed lacus a, egestas pretium lorem. Nam non metus quis nulla porta porttitor. Etiam fringilla lorem sed sem dapibus cursus. Maecenas commodo lorem lorem, eu mollis urna aliquam vitae. Vestibulum sit amet ligula a risus dignissim elementum. Nunc volutpat turpis diam, eu lacinia sapien commodo in. Nulla euismod lorem non sapien pharetra consequat. Sed cursus vehicula molestie. Ut a tristique est.</p>'
        },
        {
          slug: 'this-is-title-2',
          title: 'This is title 2',
          content:
            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et diam quis sem mollis viverra quis sed arcu. Nulla id nulla mollis tortor eleifend aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse quam ipsum, egestas sed lacus a, egestas pretium lorem. Nam non metus quis nulla porta porttitor. Etiam fringilla lorem sed sem dapibus cursus. Maecenas commodo lorem lorem, eu mollis urna aliquam vitae. Vestibulum sit amet ligula a risus dignissim elementum. Nunc volutpat turpis diam, eu lacinia sapien commodo in. Nulla euismod lorem non sapien pharetra consequat. Sed cursus vehicula molestie. Ut a tristique est.</p>'
        },
      ],

我在将内容属性插入插槽时循环数据，就像这样，

<template #content>
    {{ item.content }}
</template>

这只是一个没有 HTML 的字符串，我可以做些什么来让我的插槽解析 HTML 吗？v-html由于内容来自 CMS 和 xss 风险，我认为我不必使用我仍然不愿意使用的。

标签： javascriptvue.js

解决方案

推荐阅读