Comment appliquer des styles aux paramètres Vue-i18n

Question

Il y a les traductions suivantes dans le modèle :

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

Où compteur n'est qu'un nombre renvoyé par le script et je souhaite appliquer un style à "n" (par exemple, le rendre rouge).

Comment puis-je atteindre cet objectif ?

Answer 1

Une solution consiste à ajouter du code HTML directement dans la traduction. Cela fera que le compteur apparaîtra toujours en rouge :

Traduction :

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

Modèle :

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

Si vous souhaitez que les couleurs soient plus flexibles, vous pouvez ajouter des paramètres supplémentaires :

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