使用 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>

問題是：如何在插值參數上應用樣式，以便例如以粗體顯示名稱？

****編輯****

使用 Nikola 的建議，我以這種方式更新了我的代碼：

<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!",
    }
}

結果是我能夠看到文本“你好，歡迎回來”。 沒有填充參數 {name}。

如果我嘗試將 {{name}} 的值打印到不同的標簽中，我能夠正確地看到它。

另請注意，我正在使用：

<i18n v-t ="'home.hello_message'" tag="h2">

而不是path （路徑不工作）

Answer 1

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

Answer 2

最后我以這種方式解決了。

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