英文:
Apply style to parameter in Vue-i18n
问题
Sure, here's the translated part:
在模板中有以下翻译：
<p>
{{ $t('Counter: {n}', {n: counter}) }}
</p>
其中counter只是从脚本返回的一个数字，我想要为“n”应用样式（例如，使其变为红色）。
我如何实现这个目标？
英文:
Having the following translation in the template:
<p>
{{ $t('Counter: {n}', {n: counter}) }}
</p>
where counter is just a number returned from the script, I would like to apply a style to "n" (to make it red, for example).
How can I achieve this?
答案1
得分: 1
translation:
counter: '将HTML直接添加到翻译中可能是一种方法。这将使计数器始终以红色显示：'
template:
<span v-html="$t('counter', {n: 22})" />
如果您希望更加灵活，以便更改颜色，您可以添加附加参数：
<span v-html="$t('counter', {n: 22, color: 'green'})" />
counter: '计数器是：{n}'
英文:
One approach could be adding HTML directly to the translation. This would make the counter always appear in red:
translation:
counter: 'Counter is: <span style="color: red">{n}</span>'
template:
<span v-html="$t('counter', {n: 22})" />
If you want it more flexible regarding color, you could add additional parameter:
<span v-html="$t('counter', {n: 22, color: 'green'})" />
counter: 'Counter is: <span style="color: {color}">{n}</span>'
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论