Cara menggunakan gaya pada parameter Vue-i18n

Question

Terdapat terjemahan berikut dalam templat:

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

Di mana kaunter hanyalah nombor yang dikembalikan daripada skrip dan saya mahu menggunakan gaya pada "n" (cth. jadikan ia merah).

Bagaimana saya mencapai matlamat ini?

Answer 1

Salah satu cara ialah menambah kod HTML terus dalam terjemahan. Ini akan menjadikan kaunter sentiasa kelihatan merah:

Terjemahan:

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

Templat:

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

Jika anda mahu warna menjadi lebih fleksibel, anda boleh menambah parameter tambahan:

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