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

1：下载vue-i18n插件

npm install vue-i18n

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

中文版js文件：

英文版js文件：

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实现网页中英文切换相关推荐

springboot实现网页中英文切换
知识点 JAVA中ResourceBundle 这个类主要用来解决国际化和本地化问题.国际化和本地化可不是两个概念,两者都是一起出现的.可以说,国际化的目的就是为了实现本地化.比如对于"取消 ...
vue＋element实现中英文切换
1.安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2.在src下新建文件夹language,并在文件夹langu ...
网页中英文语言切换解决方案
网页中英文语言切换解决方案参考文章: (1)网页中英文语言切换解决方案 (2)https://www.cnblogs.com/seasons1987/archive/2012/10/09/27163 ...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
vue当前页面中英文语言切换
在开发页面时,比如就一个页面,需要切换语言的元素并不多时,我们就不必从外部引入各种插件,包,直接在项目内实现语言切换,以vue项目为例,下面为具体实现过程写入中英文数据在vue中,把要展示的中英文 ...
Ant Design Vue ：使用日历Calendar，中英文切换
官网地址:https://www.antdv.com/components/calendar-cn/#API 官网中这么说故,使用时,没做特殊设置,显示的都是英文中英文切换仅在App.vue中设置 ...
vue项目中英文切换（多语言国际化）-- i18n插件的用法
1.安装 npm install vue-i18n --save 2.在main.js文件中: import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹,这里是引 ...
【vue】中英文切换（多语言国际化）
一.安装i18n插件 npm install vue-il8n@8.23.0 --save 二.创建语言包文件夹与配置 (1)index.js中 import Vue from 'vue' // 引入 ...
struts2的国际化（即实现网站整体中英文切换）实例
推荐一个专注于Java的小众技术社区:Java之音环境要求:Struts2框架环境搭建成功为了实现程序的国际化,必须先提供程序所需要的资源文件.资源文件的内容基本是key-value对,其中key ...

vue实现网页中英文切换

文章目录

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

1：下载vue-i18n插件

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

3：配置main.js文件

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

5：数据渲染

6：效果图

vue实现网页中英文切换相关推荐

最新文章

热门文章