正确渲染Vue组件中JSON文本的HTML

Question

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

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

其中一个道具看起来像这样

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

但在输出中将<span>获取打印但不应用。

有什么帮助吗？

Answer 1

使用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