在模板中有以下翻译:
<p> {{ $t('计数器:{n}', {n: counter}) }} </p>
其中counter只是从脚本返回的一个数字,我想给“n”应用一个样式(例如,使其变红)。
我该如何实现这个目标?
一种方法是直接在翻译中添加HTML代码。这将使计数器始终以红色显示:
翻译:
counter: '计数器为:<span style="color: red">{n}</span>'
模板:
<span v-html="$t('counter', {n: 22})" />
如果您希望颜色更加灵活,可以添加额外的参数:
<span v-html="$t('counter', {n: 22, color: 'green'})" /> counter: '计数器为:<span style="color: {color}">{n}</span>'
一种方法是直接在翻译中添加HTML代码。这将使计数器始终以红色显示:
翻译:
模板:
如果您希望颜色更加灵活,可以添加额外的参数: