使用 vue-i18n 将 css 样式应用于插值参数

Question

我使用 vue-i18n 来向我的应用程序添加内部化支持。 我无法理解是否可以将样式应用于特定的插值参数。 例如。 假设我有这个标题：

你好鲍勃，欢迎回来！

作为 html 代码，我有：

<h1>Hello <span class="name_lbl">{{name}}</span>, welcome back!</h1>

使用 vue-i18n 进行插值，变得像这样：

<h1>{{ $t("hello_message", { name: "Bob" }) }}</h1>

问题是：如何在插值参数上应用样式，以便使名称以粗体显示？

**** 编辑 ****

根据尼古拉的建议，我以这种方式更新了我的代码：

<i18n v-t="'home.hello_message'" tag="h2">
   <template v-slot:name>
     <span id="myClass">{{ name }}</span>
   </template>
</i18n>

我的消息如下：

{
  "home": {
    "hello_message": "Hello {name}, welcome back!",
    }
}

结果是我能够看到文字“Hello，欢迎回来！”没有填充参数{name}。

如果我尝试将 {{name}} 的值打印到不同的标签中，我能够正确地看到它。

另请注意，我正在使用：

v-t=“'home.hello_message'”标签=“h2”>

而不是

path

（路径不起作用）

Answer 1

最后我是这样解决的。

<i18n-t keypath="home.hello_message" tag="h2">
   <template v-slot:name>
      <span class="myClass">{{ name }}</span>
   </template>
</i18n-t>

Vue3 的插槽语法用法

Answer 2

您可以尝试使用组件插值 - 插槽语法用法，例如：

<i18n-t keypath="hello_message" tag="p">
  <template v-slot:name>
    <span class="name_lbl">{{ name }}</span>
  </template>
</i18n-t>