So wenden Sie Stile auf Vue-i18n-Parameter an

Question

Die Vorlage enthält folgende Übersetzungen:

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

Wobei counter nur eine vom Skript zurückgegebene Zahl ist und ich einen Stil auf „n“ anwenden möchte (z. B. rot machen).

Wie erreiche ich dieses Ziel?

Answer 1

一种方法是直接在翻译中添加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>'