如何为Vue-i18n翻译参数{n}应用样式（如设置为红色）

方案一：v-html结合带HTML标签的翻译文案 #

这种方式适合简单场景，注意仅当参数是可信内容（比如内部生成的数字）时使用，避免XSS风险：

1. 修改语言包中的翻译文本，给参数位置加上带类名的HTML标签：

// 示例语言包（如zh-CN.js）
export default {
  'counter_label': '计数器: <span class="counter-num">{n}</span>'
}

2. 在模板中用v-html替代双大括号渲染，避免HTML转义：

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

3. 定义对应的CSS样式：

.counter-num {
  color: red;
  font-weight: bold;
}

方案二：使用Vue I18n组件式语法（推荐，更安全） #

这种方式不需要依赖HTML字符串，直接通过Vue模板插槽传递带样式的参数，完全规避XSS风险：

1. 在组件中使用<i18n>标签定义翻译文本，同时通过插槽替换参数：

<template>
  <p>
    <i18n path="counter_label">
      <!-- 用插槽对应翻译文本中的{n}参数 -->
      <template #n>
        <span class="counter-num">{{ counter }}</span>
      </template>
    </i18n>
  </p>
</template>

<script setup>
import { ref } from 'vue'
const counter = ref(5) // 你的数字变量
</script>

<!-- 内联定义翻译（也可以用外部语言包） -->
<i18n>
{
  "en": {
    "counter_label": "Counter: {n}"
  },
  "zh-CN": {
    "counter_label": "计数器: {n}"
  }
}
</i18n>

<style scoped>
.counter-num {
  color: red;
}
</style>

两种方案都能实现给参数{n}添加样式，优先推荐方案二，尤其是参数可能涉及用户输入的场景，安全性更高。

内容的提问来源于stack exchange，提问作者Little Monkey