如何在 nuxt-i18n 中添加 CSS 样式？

发布于 2025-01-20 15:53:13 字数 450 浏览 2 评论 0原文

我有以下翻译：

en.js

test: {
  hello: 'My name is Ben'
}

如果我想让“名字”是蓝色的单词，其他单词是黑色的。

我尝试过以下代码： en.js

test: {
  hello: 'My <span style="color:blue">name<span> is Ben'
}

但它会显示
我的名称是 Ben

我该如何纠正它？

原文

I have a following translation:

en.js

test: {
  hello: 'My name is Ben'
}

If I want to let 'name' is blue word,other word is black.

I have tried following code:
en.js

test: {
  hello: 'My <span style="color:blue">name<span> is Ben'
}

But it will show
My <span style="color:blue">name<span> is Ben

How can I correct it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晚风撩人 2025-01-27 15:53:13

您的 i18n JSON（仅文本）中不应包含代码，而应在模板中使用类似这样的条件

<div :class="$i18n.locale === 'en' ? 'color-blue' : 'color-red'">{{ $t('hello') }}</div>

You should not have code in your i18n JSON (just text), rather use a conditional like this in your template

<div :class="$i18n.locale === 'en' ? 'color-blue' : 'color-red'">{{ $t('hello') }}</div>

回复收藏 0 原文

娇纵 2025-01-27 15:53:13

我推荐的slots语法

test: {
  hello: 'My {placeholder} is Ben',
  name: 'name'
}

<template>
    <i18n-t keypath="test.hello" tag="p">
    <template v-slot:placeholder>
        <span style="color:blue">{{ $t('test.name') }}</span>
    </template>
    </i18n-t>
</template>

你可以参考文档：
https://vue-i18n.intlify.dev/ Guide/advanced/component.html#slots-syntax-usage

I recommend the slots syntax

test: {
  hello: 'My {placeholder} is Ben',
  name: 'name'
}

<template>
    <i18n-t keypath="test.hello" tag="p">
    <template v-slot:placeholder>
        <span style="color:blue">{{ $t('test.name') }}</span>
    </template>
    </i18n-t>
</template>

you can refer to the documentation:
https://vue-i18n.intlify.dev/guide/advanced/component.html#slots-syntax-usage

回复收藏 0 原文

~没有更多了~