Locales/literals 包含 html

Question

在

locale/lang.json 我有

{
  "title": "Title",
  "image": "service-corporate_thumb-v2.jpg",
  "alt": "alt",
  "imageFooter": "Some caption %",
  "imageFooterCTA": "author",
  "imageFooterURL": "https://example.com/author",
},

我正在尝试像这样生成作者：

<img :src="require(`~/assets/img/services/${service.image}`)" :alt="service.alt" class="mb-8">
<p>{{ service.imageFooter.replace('%', `<a href="${service.imageFooterURL}" target="_blank" class="primary-text">${service.imageFooterCTA}</a>`) }}</p>

但这会在生成的 HTML:

中打印出来

{{ service.imageFooter.replace('%', `${service.imageFooterCTA}`) }}

如何在 {{ 表达式 }} 中生成 html？

Answer 1

您需要使用 v-html 在模板中生成 html。

更多信息here。

对于你的例子试试这个

<p class="mb-8">
 <a v-html="service.imageFooter.replace('%', '<a href="$' + service.imageFooterURL + '" target="_blank" class="primary-text">$' + service.imageFooterCTA + '</a>')">
</p>

备注：

具有 v-html 指令的标签将被替换，因此您可以使用任何东西，而不仅仅是 a
v-html 的值需要是将在当前上下文中执行的有效 JS 代码。这就是我将内部标签视为字符串并删除插值 {.

Locales/literals 包含 html

Locales/literals containing html

html

translation

vue.js

nuxt.js