如何在引导程序旋转木马中显示字符串中的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>