欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实现网页中英文切换

程序员文章站 2022-06-13 22:50:22
...

前言:最近一个项目有英文版数据以及中文版数据,我就想将之做成两个语言版本的网页。

vue使用vue-i18n插件实现网页中英文切换

1:下载vue-i18n插件

npm install vue-i18n

2:自己定义中英文两套js文件

vue实现网页中英文切换
中文版js文件:
vue实现网页中英文切换

英文版js文件:vue实现网页中英文切换


3:配置main.js文件

//引入中英文切换插件vue-i18n
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 挂载

const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  messages: {
    'zh-CN': require('./lang/zh'),   // 通过require引入中文语言包
    'en-US': require('./lang/en')    // 通过require引入英文语言包
  }
})

new Vue({
  el: '#app',
  render:h=>h(App),
  router,
  store,
  i18n,  // !!!!!一定要引入
})

4:通过点击事件切换语种

this.$i18n.locale = 'zh-CN'			//切换为中文
this.$i18n.locale = 'en-US'			//切换为英文

5:数据渲染

使用方式一:

<h3 class="myHotelList-bigTtitle">{{$t('m.hotelList')}}:</h3>

使用方式二:

<el-table-column
 :label="$t('m.isOfficialRating')"	//!!!!
 min-width="120"
 :formatter="formatterRating"
>

6:效果图

vue实现网页中英文切换

vue实现网页中英文切换

相关标签: vue 中英文切换