How to apply styles to Vue-i18n parameters

Question

There are the following translations in the template:

<p>
{{ $t('计数器：{n}', {n: counter}) }}
</p>

where counter is just a number returned from the script and I want to apply a style to "n" (e.g. make it red).

How do I achieve this goal?

Answer 1

One way is to add HTML code directly in the translation. This will make the counter always appear in red:

translate:

counter: '计数器为：<span style="color: red">{n}</span>'

template:

<span v-html="$t('counter', {n: 22})" />

If you want the color to be more flexible, you can add additional parameters:

<span v-html="$t('counter', {n: 22, color: 'green'})" />
counter: '计数器为：<span style="color: {color}">{n}</span>'