vue国际化插件
1、安装
$ npm install vue-i18n
2、引入
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) const i18n = new VueI18n({
locale: 'en-US', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})
3、配置
en.js module.exports = {
navList:{
home: "HOME",
task: "TASK CENTER",
login: "LOG IN",
switch: "EN"
}
} zh.js
module.exports = {
navList:{
home: "首页",
task: "任务中心",
login: "登录",
switch: "中文"
}
}
4、使用
{{$t('navList.home')}}
5、点击切换
export default {
name: 'index',
data(){
return {
headerlogo,
cMinH: 'auto',
obj:{
"zh-CN":1,
"en-US":2
}
}
},
created(){
let langSet = localStorage.getItem('langSet');
console.log('=>',langSet)
if (langSet in this.obj)
this.$i18n.locale = langSet console.log(document.documentElement.clientHeight)
this.cMinH = document.documentElement.clientHeight - 224 + 'px'
},
methods: {
clickNav(url) {
this.$router.push(url)
},
switchLang(){
console.log('switch',this.$i18n.locale=='zh-CN')
if (this.$i18n.locale=='zh-CN')
{
this.$i18n.locale='en-US'
localStorage.setItem("langSet","en-US")
}
else
{
this.$i18n.locale='zh-CN'
localStorage.setItem("langSet","zh-CN")
}
}
}
}
vue国际化插件的更多相关文章
- Vue国际化处理 vue-i18n 以及项目自动切换中英文
1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lang ...
- vue-i18n国际化插件
vue-i18n国际化插件 安装,到项目目录下执行:npm install vue-i18n 配置在src\main.js里面引入vue-i18n // 语言包插件import VueI18n fro ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- Vue自定义插件方法大全
新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- vue常用插件汇总
UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
随机推荐
- 常用的jquery遍历函数
1.Jquery遍历祖先 1).parent() 方法返回被选元素的直接父元素. 2).parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...
- Linux pwn入门教程——CTF比赛
Linux pwn入门教程(1)——栈溢出基础 from:https://zhuanlan.zhihu.com/p/38985585 0x00 函数的进入与返回 要想理解栈溢出,首先必须理解在汇编 ...
- “SecureCRT遇到一个致命的错误且必须关闭”处理办法
打开SecureCRT时报错:SecureCRT遇到一个致命的错误且发须关闭.一个崩溃转储文件已创建于... 解决办法是,如下在cmd中输入regedit回车打开注册表编缉器 展开HKEY_LOCAL ...
- java下使用chromedriver获取访问页面状态码
##在使用chromedriver的时候 并没有提供api来获取访问页面的状态码,但是可以打开日志来获取到 LoggingPreferences logPrefs = new LoggingPrefe ...
- memory prefix inter,intra,intro,iso out 5
1● inter 在~之间:相互 2● intra 3● iso 等 同 4● intro 向内,在内,内部
- Oracle中如何停止正在执行SQL语句
oracle的用P/SQL客户端中,如何停止正在执行的SQL语句? 我们使用oracle语句查询某个表时,如果查询的表数据太多,如何停止正在执行操作 如查询的表数据超过上万条时,如何停止查询操作
- 学习笔记-AngularJs (一)
最近对AngularJs产生了浓厚的学习兴趣,于是便搜罗所有资料,开始学习起来,也希望把学习过程记录下来. 首先学习之前,需要对AngularJs进行个大概的了解: AngularJS[1] 诞生于 ...
- jdk重装后com.sun.tools.javac.Main is not on the classpath的问题 .
在重装了JDk之后,在编译工程的时候出现如下错误: com.sun.tools.javac.Main is not on the classpath.Perhaps JAVA_HOME does no ...
- java高级⑴
1.之前我们学过 数组: 数组的特点: 01. 长度一旦被定义,不允许被改变 02. 在内存中开辟一连串连续的空间! 那么现在有一个需求: 让我们定义一个数组 来 保存 新闻信息!!! 问题: 01. ...
- gulp安装和使用
1.全局安装gulp:sudo npm install -g gulp 2.代码根目录:npm install 3.gulp 开始编译(在项目根目录下创建一个名为 gulpfile.js 的文件) 注 ...