vue.js - 正确渲染Vue组件中JSON文本的HTML

我正在遍历由简单HTML标记组成的 Prop 列表

<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
  <p>{{ keyOffer.head }}</p>
  <p>{{ keyOffer.sub }}</p>
</div>

其中一个 Prop 看起来像这样

keyOffers: [
  {
    id: 'offerSecond',
    head: '4G network',
    sub: 'Dedicated to bringing you the <span class="u_underline">best mobile service</span>
  },
]

但在输出中，<span>会被打印而不应用。

有什么帮助吗？

最佳答案

使用v-html指令:

<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
  <p>{{ keyOffer.head }}</p>
  <p v-html="keyOffer.sub"></p>
</div>

引用: RawHTML