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进入调试状态即可: 安装中出现的问题: 插件安装 ...
随机推荐
- 理解JS中的this的指向
原文地址:https://www.cnblogs.com/pssp/p/5216085.html#1 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到 ...
- 图解ActiveMQ virtual topic
http://activemq.apache.org/virtual-destinations.html 普通的 topic 是发布/订阅模式:消息会被广播发送给所有的订阅者,订阅者拿到的是全部消息, ...
- 使用深度学习检测TOR流量——本质上是在利用报文的时序信息、传输速率建模
from:https://www.jiqizhixin.com/articles/2018-08-11-11 可以通过分析流量包来检测TOR流量.这项分析可以在TOR 节点上进行,也可以在客户端和入口 ...
- 从此web开发so easy!
ECharts (Enterprise Charts 商业产品图表库) 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图 ...
- 解决libvlc_media_player_stop时死锁的方法
转自:http://www.jiazi.cn/blog/?id=56 扩散该解决方法 最近需要使用VLC控件来做一个简单的流媒体播放器,在实施过程中,发现在调用libvlc_media_player_ ...
- memory prefix inter,intra,intro,iso out 5
1● inter 在~之间:相互 2● intra 3● iso 等 同 4● intro 向内,在内,内部
- Jquery如何禁止鼠标右键菜单
jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...
- Spring @Scheduled @Async联合实现调度任务(2017.11.28更新)
定时任务之前一直用的是quartz之类,但是注意到Spring中其实也提供了一种简单的调度注释@Scheduled,也就想尝一下鲜.. 代码示意如下: @Component @EnableSchedu ...
- 在shell脚本里执行sudo 命令
可以 : echo "yourpasswd" |sudo -S yourcommand 但是不安全,因为密码都显示在shell脚本里面了-_- 引自http://hi.baid ...
- python settings :RROR 1130: Host 'XXXXXX' is not allowed to connect to this MySQL server
pymysql.err.InternalError: (1130, u"Host '127.0.0.1' is not allowed to connect to this MySQL se ...