vue与vue-i18n结合实现后台数据的多语言切换方法


Posted in Javascript onMarch 08, 2018

在XXX.js文件中定义函数:

getUser(context,info){
  context.$http.get(SERVER_URL+'/users',info).then(function(data){
   let err =data.body.error;
   if(err===0){
    let dataObj = data.body.userLists;  //获取后台返回的数据
    this.users = dataObj.items.map(function (e,i) {  //遍历获取的数据,用this.$t()将每项数据与翻译资源对应
     e.gender=context.$t(e.gender);            //context 是this, gender 与 diabetes_type 为每个items里的key;gender里的value有三种:'GDRNF'、‘GDRF'、‘GDRM'
     e.diabetes_type = context.$t(e.diabetes_type);
     return e;
    });
    this.listLoading = false;
    // console.log(dataObj);
   }
  })
 },

然后可以在vue 组件中调用函数 :XXX.getUser(this,info); 将后台获取的数据做相应操作后放入users数组;

以上方法是通过map函数遍历获取到的数据,用this.$t()将items的value与翻译资源中的value对应,从而实现后台数据的多语言切换;

en.json翻译资源中的部分数据:

{ 
  "GDRNF":"Not Fill", 
  "GDRF":"Female", 
  "GDRM":"Male", 
 }

以上这篇vue与vue-i18n结合实现后台数据的多语言切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 #Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 #Javascript
JavaScript满天星导航栏实现方法
Mar 08 #Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 #Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 #Javascript
layui select动态添加option的实例
Mar 07 #Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 #Javascript
You might like
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php防止sql注入简单分析
2015/03/18 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
小学师德标兵先进事迹材料
2014/05/25 职场文书
团干部培训方案
2014/06/03 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
公司员工体检通知
2015/04/21 职场文书
风之谷观后感
2015/06/11 职场文书
Python实现位图分割的效果
2021/11/20 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS