multiLanguage

功能描述

基于Vue的APP多语言处理,用例见 multiLanguage.html / multiLanguage-demo.html

依赖的模块

  1. libs/vue.js

快速使用

首先创建一个多语言的数组,如下所示:(完整用法参见multiLanguage.html

  1. var langResource = {
  2. 'zh': {
  3. 'tip': '这是中文!'
  4. },
  5. 'en': {
  6. 'tip': 'This is English!'
  7. },
  8. 'ja': {
  9. 'tip': 'これは日本語です!'
  10. }
  11. };

html内容如下

  1. <div id="app">
  2. <div v-text="lang.tip"></div>
  3. </div>

原理:通过将用户选择的语言类型保存到本地,每次加载选用相对应的语言对象数组渲染页面

  1. var vuedata = {
  2. lang: {}
  3. };
  4. var vm = new Vue({
  5. el: '#app',
  6. data: vuedata
  7. });
  8. vuedata.lang = langResource['zh'];

demo文件中还提供了另一种方法,通过loadScript动态加载所需的语言文件包,用法参见multiLanguage-demo.html