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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
JavaScript 异步调用
Oct 25 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 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实现jQuery扩展函数
2009/10/30 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP模块化安装教程
2016/06/01 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python3.5运算符操作实例详解
2019/04/25 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
学生党支部先进事迹
2014/02/04 职场文书
公司新年寄语
2014/04/04 职场文书
无房证明范本
2014/09/17 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
离婚协议书格式
2014/11/21 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL