vue-i18n插入变量，HTML等

原创已于 2023-06-14 11:57:39 修改 · 4.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-12-23 19:04:54 首次发布

笔记专栏收录该内容

20 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中使用i18n进行国际化，包括直接插入变量和以HTML形式插入带有样式的变量。示例展示了在`base.json`文件中定义多语言文本，然后在`index.vue`组件中通过`$t()`方法动态显示杯子数量，并通过`<i18n>`标签结合`slot`插入带颜色的HTML元素。

定义i18n变量：

assets\locales\zh-CN\base.json

{
  "cups-count": "这里有{count}个杯子"
}

components\cup\index.vue：

一、直接插入count变量：

<p>{{$t('cups-count', {count:6})}}</p>

直接使用变量，页面上：

<template>
  <div class="page-section">
    <p class="page-section-title">杯子详情</p>
    <!-- 插入文字 -->
    <div class="f12">
        <p>{{$t('cups-count', {count:6})}}</p>
    </div>
  </div>
</template>

二、以HTML形式插入count变量：

p标签中，要单独给count变量的值设置颜色，所以要在p标签中插入span标签，给span标签设置类名：

<i18n path="cups-count" :tag="false">
  <template slot="count">
    <span class='theme-color'>6</span>
  </template>
</i18n>

count变量以HTML形式插入，页面上：

<template>
  <div class="page-section">
    <p class="page-section-title">杯子详情</p>
    <!-- 插入HTML -->
    <div class="f12">
        <i18n path="cups-count" :tag="false">
		  <template slot="count">
		    <span class='theme-color'>6</span>
		  </template>
		</i18n>
    </div>
  </div>
</template>