Vue-i18n国际化多语言使用

Vue-i18n国际化多语言使用

上一篇讲述了如何在vue项目中加入 Vue-i18n 并配置、导入，这篇用来讲述常规的使用方法。
demo(dev分支)： https://github.com/Cxiaomu/vue-i18n/tree/dev

$t Formatting

1、基础使用

zh.js

export default {
  normal: {
    label1: "中文",
  },
};

en.js

export default {
  normal: {
    label1: "English",
  },
};

vue组件

<span>{{ $t("normal.lael1") }}</span>

显示效果

在这里插入代码片

2、拼接对象属性 ｜ 数组元素

拼接数组｜对象时，可以把它们理解为，传入的这个变量中能取到语言包中所需的属性就行，obj1[‘name’] 和 arr1[0]能取到对应的值。
zh.js

export default {
  normal: {
    obj1: "{name}更好一点",
    arr1: "{0}第一",
  },
};

en.js

export default {
  normal: {
    obj1: "{name} is better",
    arr1: "{0} is first",
  },
};

vue组件

<!-- 
	obj1 = {
        name: "Cxiaomu",
      },
     arr1 = ["A"],
 -->
<span>{{ $t("normal.obj1", obj1) }}</span>
<span>{{ $t("normal.arr1", arr1) }}</span>

$tc Pluralization

1、单选指定字符

zh.js

export default {
  normal: {
    plur1: "零 | 一 | 二",
  },
};

en.js

export default {
  normal: {
     plur1: "zero | one | two",
  },
};

vue组件

<!--  arr2: [0, 1, 2] -->
<span>{{ $tc("normal.plur1", arr2[0]) }}</span>
<span>{{ $tc("normal.plur1", arr2[1]) }}</span>
<span>{{ $tc("normal.plur1", arr2[2]) }}</span>

2、单选指定字符拼接对象属性｜数组元素

zh.js

export default {
  normal: {
    plur2: "零 - {0} | 一 - {1} | 二 - {2}",
  },
};

en.js

export default {
  normal: {
  	plur2: "zero - {0} | one - {1} | two - {2}",
  },
};

vue组件

<!--  arr2: [0, 1, 2] -->
 <span>{{ $tc("normal.plur2", arr2[0], arr2) }}</span>
 <span>{{ $tc("normal.plur2", arr2[1], arr2) }}</span>
 <span>{{ $tc("normal.plur2", arr2[2], arr2) }}</span>

$d DateTime localization

由于目前个人所经历的，$d 并没有实际工作使用过，通常都是使用 moment.js 和 day.js、lodash，于是此处便不再演示，在demo项目中有对应的例子可供参考。