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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
js实现浏览器打印功能的示例代码
Jul 15 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
php错误、异常处理机制(补充)
2012/05/07 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python中的random()方法的使用介绍
2015/05/15 Python
Python中常见的数据类型小结
2015/08/29 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python 下载及安装详细步骤
2019/11/04 Python
基于python plotly交互式图表大全
2019/12/07 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
通过自学python能找到工作吗
2020/06/21 Python
Pygame框架实现飞机大战
2020/08/07 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
房产委托公证书样本
2014/04/04 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
法定代表人资格证明书
2015/06/18 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang