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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
详解使用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开发入门教程之面向对象
2006/12/05 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python实现画一颗树和一片森林
2018/06/25 Python
python变量命名的7条建议
2019/07/04 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
两只小狮子教学反思
2014/02/05 职场文书
销售岗位职责范本
2014/06/12 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
英语邀请函范文
2015/02/02 职场文书
永远是春天观后感
2015/06/12 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
教师素质教育心得体会
2016/01/19 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS