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?
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>'
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>'