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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
javascript中的隐式调用
Feb 10 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
微信小程序点击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
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
大学生自荐书范文
2013/12/10 职场文书
小区门卫岗位职责
2013/12/31 职场文书
国际会议邀请函范文
2014/01/16 职场文书
求职信范文怎么写
2014/01/29 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
python随机打印成绩排名表
2021/06/23 Python