我有一個用于引導輪播的 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>
我想知道如何'<p>some content</p>'在輪播中顯示 html 字串（如 ）。
我嘗試使用DOMParser()andparseFromString()但是將所有 html 內容注入到輪播的單個專案中，而不是該元素的相應專案。
如果解決方案不涉及 BootstrapVue，我將不勝感激，因為我正在使用 Vue-3。
uj5u.com熱心網友回復：
您可以使用：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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512230.html