Vue中使用vue-i18插件实现多语言切换功能
时间:2019-04-14
本文章向大家介绍Vue中使用vue-i18插件实现多语言切换功能,主要包括Vue中使用vue-i18插件实现多语言切换功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在基于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插件实现多语言切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- WordPress 标签页面只有一篇文章时自动跳转到该文章
- OS X 上使用.NET开发应用程序
- [C#6] 2-nameof 运算符
- Key-Value Coding(KVC),Key-Value Observing(KVO)和Cocoa Bindings for MonoMac
- [C#6] 7-索引初始化器
- jquery mobile 移动web(3)
- 卷积神经网络详解(二)——自己手写一个卷积神经网络
- VS 2010 SP1的一个功能(添加可部署依赖项)
- 一组扁平化组件推荐下载(PSD 格式)
- [C#6] 6-表达式形式的成员函数
- 在启用了IPV6的机器上获取客户端ipv4地址
- 使用 MDT 2010 进行可伸缩部署
- 性能优化工具 MVC Mini Profiler
- 在ASP.NET应用启动的时候初始化的几种方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kafka的生产者分区机制原理(二)
- (17)Bash别名与快捷键
- (16)Bash历史命令与补全
- 【python-leetcode325-滑动窗口法】最大子数组之和为k
- 爬取51job出现can only concatenate str (not “NoneType“) to str
- springboot之基于注解整合mybatis
- springboot之基于配置文件整合mybatis
- springboot之整合JPA
- springboot之自定义starter
- 【python-leetcode340-滑动窗口法】至多包含 K 个不同字符的最长子串
- 要不是真的喜欢学技术,谁会来爬小姐姐啊。
- springboot缓存之@CachePut注解
- springboot缓存之@Caching和@CacheConfig注解
- BERT源码分析(PART III)
- springboot之整合基本的jdbc并操作Mysql数据库