vue js组件中的原始html（使用nuxt）答案

【问题标题】：raw html in a vue js component (with nuxt)vue js组件中的原始html（使用nuxt）
【发布时间】：2019-01-03 15:37:07
【问题描述】：

我在我的组件中传递的对象内部收到一个正文（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 有没有合适的方法来做到这一点？

【问题讨论】：

标签： html vue.js nuxt.js

【解决方案1】：

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

诀窍是 v-html 指令

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

【讨论】：

当我运行npm run lint时，出现警告warning 'v-html' directive can lead to XSS attack vue/no-v-html
是的，没错，这也记录在 vue 的文档中。因此，只有在您可以信任来源并且永远不会在其中放入用户内容的情况下，您才应该使用它。

【解决方案2】：

是的，使用v-html。

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

【讨论】：