Vue中使用vue-i18插件实现多语言切换功能
2018-04-25 10:23
1141 查看
在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下:
step1: 在项目中安装vue-i18插件
cnpm install vue-i18n --save-dev
step2:在项目的入口文件main.js中引入vue-i18n插件
import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./assets/lang/zh'), 'en': require('./assets/lang/en') } }) // vue实例中引入 /* eslint-disable no-new */ new Vue({ el: '#app', i18n, router, template: '<Layout/>', components: { Layout }, })
step3:页面中使用
在模板中使用时,大概有以下3种情况,若有疏漏,望大家指正
zh.js
module.exports = { menu : { home:"首页" }, content:{ main:"这里是内容" } }
en.js
module.exports = { menu : { home:"home" }, content:{ main:"this is content" } }
1)在标签内作为正文内容
<div class="title">{{$t('menu.home')}}</div>
2)作为标签属性使用
<input :placeholder="$t('content.main')" type="text">
3)作为js中文字使用时
console.log(this.$t('content.main'));
4)待补充...
step4:页面上进行中英文切换,在中英文切换的按钮上绑定事件,如下:
tabEn: function () { this.$i18n.locale = 'en' }, tabCn: function () { this.$i18n.locale = 'zh' }
至此,vue-i18n插件使用完结。
总结
以上所述是小编给大家介绍的Vue中使用vue-i18插件实现多语言切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- VS.Net2005中使用本地化功能实现多语言的切换
- 使用jQuery UI插件实现切换主题功能——经验小结
- VS.Net2005中使用本地化功能实现多语言的切换
- 使用jQuery UI插件实现切换主题功能——经验小结
- EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现
- 使用ant实现svn管理得eclipse插件开发项目的日构建功能(ant1.7.1+svn1.6.3+eclipse3.4.2)
- Delphi XE2 之 FireMonkey 入门(18) - TLang(多语言切换的实现)
- Qt的国际化示例程序以及步骤--实现Qt程序的动态切换语言功能
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- Android使用Fragment来实现TabHost的功能(解决切换Fragment状态不保存)以及各个Fragment之间的通信
- InstallShield 2012 Spring新功能试用(18): Suite/Advanced UI 和 Advanced UI工程的界面编辑视图中添加了控件工具栏和语言切换功能
- 使用jQuery插件和FCK实现csdn博客功能
- Android使用Fragment来实现ViewPager的功能(解决切换Fragment状态不保存)以及各个Fragment之间的通信
- 使用接口实现附带插件功能的程序
- 使用pager-taglib插件实现SSH框架的分页显示功能,只翻页三出错
- 使用jquery插件实现打印指定区域功能
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名
- Asp.net如何使用access数据库做profile实现按照区域显示相应语言功能
- 使用jquery插件【jquery.cookie】,实现【记住我】功能