elementUI select vue-i18n 下拉框语言切换

最新推荐文章于 2024-05-09 14:07:00 发布
最新推荐文章于 2024-05-09 14:07:00 发布
阅读量4.1k 收藏 2
点赞数 2
分类专栏： vue 文章标签： vue-i18n  select  data 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renlang7090/article/details/81154638
版权

在使用vue-i18n 语言切换的是，有select下拉框的时候 下拉框的数据来源于data ，切换语言的时候不刷新页面不会切换语言，可以如下做：

效果图

 

使用select 组件的时候用循环来添加要显示的文字信息

data里面定义文字循环的编号

语言js 这样写

T-wave
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
利用vue-i18n实现多语言切换效果的方法
12-13
前言 有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。 安装vue-i18n 我们使用npm安装vue-i18n。 npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n。 import Vue from 'vue' import App from './App' import VueI18n from 'vue-i18n' Vue.use
vue-i18n提取-使用静态分析管理vue-i18n本地化。 报告丢失和未使用的i18n条目。-Vue.js开发
05-27
vue-i18n-extract vue-i18n-extract用于与使用vue-i18n的Vue.js项目一起使用。 运行vue-18n-extract时，将分析您的Vue.js源代码。vue-i18n-extract vue-i18n-extract是为与使用vue-i18n的Vue.js项目一起使用而构建的...
element 控件 中英文翻译 ，
github_37793365的博客
11-08 3315
import VueI18n from 'vue-i18n' import ElementUI from 'element-ui' import ElementLocale from 'element-ui/lib/locale' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'elemen...
vue中使用element的i18n语言转换(保姆式教程-保证能用)
最新发布
weixin_45859470的博客
05-09 310
1、项目中需要使用的插件，vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用。其他的语言类似以上操作，创建xx.js的文件，在lang文件夹下面的index.js引入并且在messages里面使用即可。因为要在最外层切换，所以需要使用vuex，又想刷新语言不丢失，可以保存在本地。3、创建lang文件夹，然后对应的js语言文件。2、在main.js中引入i18n。然后在index.js引入模块即可。zh.js文件，中文语言包。在页面中进行语言切换。
下拉列表框中进行语言切换
走在java的路途上
11-09 1486
各位大侠好,小弟有一事相求,现在我已经做到在下拉列表框中取到各种语言的值了,只是还没有实现从其中选择一种语言,页面就自动转换成这种语言,请问如何实现这样的功能? 我在.page中定义了这样一个组件:                        在.html中这样定义:                选择语言:
vue-i18n + element-ui实现国际化教程（中英文切换）
Flowering_Vivian的博客
11-10 1933
Vue+Element-ui实现国际化教程
关于vue项目中使用element-ui时，默认中文切换成英文的全局配置方法
热门推荐
TheHtmler的博客
06-21 1万+
vue默认使用的中文语言，当我们想要默认使用英语或者其他语言时，需要替换掉原本的中文 问题：当我在写项目时，比如table的分页时，默认显示的内容是中文的，如下： 解决：根据官网给出的提示，通过配置webpack.config.js，但是，我使用的是vue-cli 3，所以需要自己手动配置。 在项目根目录下创建 vue.config.js，具体配置如下： const path = r...
element-ui实现双语切换功能
weixin_38289645的博客
12-11 1万+
这里主要是vue2+elementUI+i18n 国际化语言切换 1、首先安装i18n：npm install vue-i18n --save 2、在src建以下目录，并附上代码： cn.js代码： import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包 const cn = { messa...
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
@ intlify / vue-i18n-loader 用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18...
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
一键写代码的博客
10-23 7763
公司后台管理系统需要使用多语言版本，本次记录使用i18n实现多语言切换的流程步骤： 1、安装工具包 npm install vue-i18n 2、在项目src目录下新建lang文件夹，目录结构如下： -lang |----index.js // 脚本文件 |----en.js // 我们自己的英文包 |----zh.js // 我们自己的中文包 element-ui本身有自己的语言包，我...
element vue 获取select 的label_项目中常用的vue代码总结（2）
weixin_39605455的博客
11-30 115
下拉多选以及全选项目中使用的是element-ui的el-select组件；需求：下拉的所有字段多选；额外在下拉框中多一个全选选项，点击全选，则全选所有字段templete中代码：<el-select class="select-options" @change="selectValueChange" v-model="selectValue" multipl...
用原生代码制作公司官网+jQuery.i18n中英文如何切换+垂直下拉框
weixin_40679578的博客
12-27 609
制作公司官网首先要看看SEO(搜索引擎优化)，说白就是在用百度搜索的时候能排名靠前一点，推荐看一下这个就差不多了添加链接描述。 分享一下踩得坑： 1、公司要做的有中英文的，上一个版本的官网也是中英文，做了两套，一套中文一套英文，然后可以从一个html跳到英文页面去过去，这样的目录结构： 我也照做了…后来发现有更简单的方法，可以用基于jQuery.i18n.properties 实现前端页面的资源...
vue el-select 的 实现切换中英文
weixin_30364325的博客
09-01 1503
html部分<el-select class="language" v-model="language" @change="chooseLang(language)"> <el-option label="中文" value="cn" /> <el-option label="English" value="en" /></el-s...
html data i18n属性,i18n() 国际化标记查询 文档(Options & API) DataTables中文网
weixin_36421759的博客
06-10 1475
描述(Description)该方法设计是为了提供给插件和扩展的开发人员，最终向用户显示语言字符串。它提供了将languageOption配置对象用作语言字符串的单个配置点，然后从该对象中查找值的功能。对于开发人员未提供自己的字符串的情况，应该提供默认值。该方法还提供了在考虑国际化时必须考虑的单数，复数，双重等形式的基本支持。这是通过提供一个包含要使用的表单的键的对象以及默认值来完成的。考虑如下对...
项目国际化I18N多语言切换
qq_33298964的博客
08-31 1802
i18n，作为国际化的门户网站，支持多种不同的语言，以方便不同国家，不同语种的用户访问尤其重要，目前通过Vue I18n已实现中英文自由切换
NG客制项目下的I18n国际化标准方案
weixin_33966365的博客
01-31 468
方案选择 国际化i18n ​ 这个方案是最成熟的，同时也是官方的方案，但是这样一个标准化的方案同时意味着灵活度不够。当需要划分feature module，需要客制化组件的时候，这个方案的实施的成本就会远远超过预期，因此在项目中放弃了该方案。 ngx-translate ​ 这个方案是目前i18n一个比较优秀的替代方案，由Angular Core Team的成员Olivier Combe开...
vue 仿照抖音视频效果（滑动切换）vant2
TwoBE9876的博客
03-15 2838
同时他也在 github 上发现一位大佬做的这种效果也特别好。那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~这是大佬的主要代码，感兴趣的小伙伴可以去看看。看个效果图，再决定学不学。
Vue-i18n官方怎么切换中文
03-23
语言？ 您可以使用Vue-i18n提供的$setLocaleMessage方法来切换中文语言。具体步骤如下： 1. 在Vue组件中引入Vue-i18n库。 2. 在Vue实例中配置Vue-i18n。 3. 在Vue组件中使用$t方法来获取翻译后的文本。 4. 使用$setLocaleMessage方法来切换中文语言。 具体代码如下： // 引入Vue-i18n库 import VueI18n from 'vue-i18n' // 配置Vue-i18n const i18n = new VueI18n({ locale: 'en', // 默认语言为英文 messages: { en: { message: { hello: 'hello world' } }, zh: { message: { hello: '你好，世界' } } } }) // 在Vue组件中使用$t方法来获取翻译后的文本 export default { name: 'App', i18n, methods: { sayHello() { alert(this.$t('message.hello')) } } } // 使用$setLocaleMessage方法来切换中文语言 i18n.setLocaleMessage('zh', { message: { hello: '你好，世界' } })

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值