應用樣式於Vue-i18n參數的方法

Question

在模板中有以下翻譯：

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

其中counter只是從腳本傳回的數字，我想為「n」套用一個樣式（例如，使其變紅）。

我該如何達成這個目標？

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>'