如何从引导轮中的字符串中显示HTML？

Question

我有一个Bootstrap Carousel的Vue组件，它有以下代码：

<template>
    <div :id="id" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div :id="'carousel'+subject.id" v-for="subject,index in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
                <h2>{{ subject.title}}</h2>
                <span>{{ subject.subtitle}}</span>
                <div>{{ subject.html_content}}</div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" :data-bs-target="'#'+id" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</template>
<script>
export default {
    props: ['id', 'subjects'],
}
</script>

我想知道如何在旋转木马中显示html字符串(如'<p>some content</p>')。

我试着使用DOMParser()和parseFromString()，但是在旋转木马的单个条目中注入了所有的html内容，而不是该元素的对应项。

如果解决方案不涉及BootstrapVue，我将非常感激，因为我使用的是Vue-3。

Answer 1

您可以使用v-html <div v-html="subject.html_content"></div>

​

new Vue({
  el: "#demo",
  data() {
    return {
      subjects: [{id: 1, title: 'aa', subtitle: "aaa", html_content: '<b>sss</b>'}, {id: 2, title: 'bb', subtitle: "bbb", html_content: '<b>sss</b>'}, {id: 3, title: 'cc', subtitle: "ccc", html_content: '<b>sss</b>'}],
      id: 1
    }
  }
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div :id="id" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div :id="'carousel'+subject.id" v-for="(subject,index) in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
        <h2>{{ subject.title}}</h2>
        <span>{{ subject.subtitle}}</span>
        <div v-html="subject.html_content"></div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" :data-bs-target="'#'+id" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

​