包含html的区域设置/文本

在

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>

---

如何在{{expresion}中生成html？

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

更多信息

举个例子，试试这个

<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代码。这就是我将内部标记视为字符串并删除插值

  {

  的原因

---

谢谢！我的示例会是怎样的呢？文档非常简短，只有一个非常简单的示例谢谢，但请注意，您正在更改字符串连接$，我就是这样做的：（摆弄以防止代码格式化）

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