在
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?
您需要使用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代码。这就是我将标签内部视为字符串并删除插值{
的原因。