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 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
JavaScript常用工具函数大全
May 06 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
Python 的 with 语句详解
2014/06/13 Python
windows下python连接oracle数据库
2017/06/07 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python如何变换环境
2020/07/21 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
上班迟到检讨书
2015/05/06 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书