vue js组件中的原始html(带有nuxt)

时间:2018-07-26 15:14:25

标签: html vue.js nuxt.js

我在传入组件的对象内部接收到一个带有HTML标签(主要是p标签)的主体(actu.body),我想知道如何为客户端解释它们,我的代码现在是这样的:

<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做到这一点的正确方法?

2 个答案:

答案 0 :(得分:2)

看看官方指南:https://vuejs.org/v2/guide/syntax.html#Raw-HTML

诀窍是v-html指令

<span v-html="rawHtml"></span>

答案 1 :(得分:1)

是,请使用v-html

<v-card-text v-html="actu.body"></v-card-text>