vue中英文切换实例代码


Posted in Javascript onJanuary 21, 2020

1、安装 vue-i18n依赖

yarn add vue-i18n 或者 npm install vue-i18n --save-dev

2、在src/components下新建文件夹language,并在文件夹language下新建zh.js及en.js

【src/components/language/zh.js】
module.exports = {
  language: {
    name: 'English'
  },
  user: {
    login:'登录',
    register:'注册',
    loginUsername:'请输入邮箱/手机号',
  }
}

【src/components/language/en.js】
module.exports = {
  language: {
    name: '中文'
  },
  user: {
    login:'login',
    register:'register',
    loginUsername:'please input email or phone',
  }
}

3、在main.js下引入及注册vue-i18n

//中英文切换
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
  locale:localStorage.getItem('languageSet')||'zh',  //从localStorage里获取用户中英文选择,没有则默认中文
  messages:{
    'zh':require('./components/language/zh'),
    'en':require('./components/language/en')
  }
})

new Vue({
  el: '#app',
  router,
  i18n,  //把 i18n 挂载到 vue 根实例上
  components: {
    App
  },
  render: h => h(App),
})

4、使用

<template>
  <span>{{$t('user.login')}}</span>  //登录
  <input type="text" :placeholder="$t('user.loginUsername')" v-model="username" />  //输入账号

  <div @click="changeLanguage()">{{$t('language.name')}}</div>  //切换中英文的按钮
</template>

<script>
  methods:{
    changeLanguage(){
      this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'  //设置中英文模式
      localStorage.setItem('languageSet',this.$i18n.locale)  //将用户设置存储到localStorage以便用户下次打开时使用此设置
    },
  }
<script>

以上就是本次介绍的全部相关知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 #Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP正确配置mysql(apache环境)
2011/08/28 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python Tkinter的图片刷新实例
2019/06/14 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2014年业务工作总结
2014/11/17 职场文书
2014年行政部工作总结
2014/11/19 职场文书
写给领导的感谢信
2015/01/22 职场文书
通知格式
2015/04/27 职场文书
公司周年庆典致辞
2015/07/30 职场文书
消防宣传标语大全
2015/08/03 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL