vue-i18n实现中英文切换的方法


Posted in Javascript onJuly 06, 2020

1.下载

npm install vue-i18n

2.创建中英文包

vue-i18n实现中英文切换的方法

2.1 中文包

vue-i18n实现中英文切换的方法

2.2 英文包

vue-i18n实现中英文切换的方法

3.在main里面引入

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale:
    localStorage.getItem("lang") == (undefined || "" || null)
      ? "zh"
      : localStorage.getItem("lang"),
  messages: {
    zh: require("../static/lang/text-zh.json"),
    en: require("../static/lang/text-en.json")
  }
});

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

4.在组件中使用

<div>{{ $t('footer.home') }}</div>
或者
<input type="span" value="" :placeholder="$t('footer.home')" v-model="search" />
或者
this.$toast(this.$t('footer.home'))

5.使用按钮进行手动切换,这里我用了switch用true和false来识别中英文,用这种方法也可以用于其他语言切换

<switch @change="changeEn" :checked="zhOren" />


changeEn(e) {
            if (e.target.value) {
                //中文
                this._i18n.locale = 'zh';
                localStorage.setItem('lang', 'zh');
            } else {
                //英文
                this._i18n.locale = 'en';
                localStorage.setItem('lang', 'en');
            }
        }

以上就是vue-i18n实现中英文切换的方法的详细内容,更多关于vue 中英文切换的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 的Document属性和方法集合
Jan 25 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue 实现动态路由的方法
Jul 06 #Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 #Javascript
解决Nuxt使用axios跨域问题
Jul 06 #Javascript
js实现星星打分效果
Jul 05 #Javascript
jQuery实现简单飞机大战
Jul 05 #jQuery
javascript实现贪吃蛇小练习
Jul 05 #Javascript
jQuery实现简单日历效果
Jul 05 #jQuery
You might like
php cookie 详解使用实例
2016/11/03 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python 数据类型强制转换的总结
2021/01/25 Python
周年庆典邀请函范文
2014/01/23 职场文书
《值日生》教学反思
2014/02/17 职场文书
优秀党员获奖感言
2014/02/18 职场文书
三查三看党性分析材料
2014/02/18 职场文书
三万活动总结
2014/04/28 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js