[英]raw html in a vue js component (with nuxt)
我在我的組件中傳遞的對象內部收到一個正文(actu.body),里面有html標簽(主要是p標簽),我想知道如何為客戶端解釋它們,我的代碼現在是這樣的:
<template>
<div>
<!-- {{ actu }} -->
<v-parallax
:src="actu.images[0].url"
dark
>
<v-layout
align-center
column
justify-center
>
<h1 class="display-2 font-weight-thin mb-3">{{ actu.headline }}</h1>
<h4 class="subheading">{{ actu.summarry }}</h4>
</v-layout>
</v-parallax>
<v-card>
<v-card-text>
{{ actu.body }}
</v-card-text>
</v-card>
</div>
</template>
<script>
export default {
props: {
actu: {
type: Object,
required: true
}
} };
有沒有合適的方法用 vue js 做到這一點?
看看官方指南: https ://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
訣竅是 v-html 指令
<span v-html="rawHtml"></span>
是的,使用v-html
。
<v-card-text v-html="actu.body"></v-card-text>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.