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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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
PHP4中实现动态代理
2006/10/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python实现的knn算法示例
2018/06/14 Python
python3.7.0的安装步骤
2018/08/27 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python time()的实例用法
2020/11/03 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
什么是继承
2013/12/07 面试题
小区门卫工作职责
2013/12/14 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
道德演讲稿
2014/05/21 职场文书
党性心得体会
2014/09/03 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
幼儿园个人总结
2015/02/28 职场文书
音乐课外活动总结
2015/05/09 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电