摘要:方式使用引入要在之后引入使用你好当前语言重新设置中文英文其他当前语言切换语言效果项目中使用安装使用入口文件增加以下代码可以创建文件夹,拆分国际化文件最后引入国际化保存对象你好引用模板当前语言切换语言当前语言重新设置中文英文其他效
cdn方式使用
1.引入
vue-i18n要在vue之后引入
2.使用
js
const messages = { "zh_CN": { "hello": "你好 {name}", }, "en_US": { "hello": "hello {name}", } } var i18n = new VueI18n({ locale: "zh_CN", messages }) var vm = new Vue({ data: { }, el: "#root", i18n, methods: { toggleLang : function(){ let lang = this.$i18n.locale //当前语言 this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新设置 } }, computed: { lang: function(){ switch (this.$i18n.locale) { case "zh_CN": return "中文"; case "en_US": return "英文"; default: return "其他"; } } } })
html
当前语言: {{ lang }}{{ $t("hello", { name:"vue" } ) }}
3.效果
1.安装
npm install vue-i18n
2.使用
入口文件main.js增加以下代码
import VueI18n from "vue-i18n" Vue.use(VueI18n) // 可以创建i18n文件夹,拆分国际化文件 最后import引入 const messages = { // 国际化保存对象 "zh_CN": { "hello": "你好 {name}", }, "en_US": { "hello": "hello {name}", } } const i18n = new VueI18n({ locale: "zh_CN", messages, }) new Vue({ el: "#app", router, components: { App }, template: "", i18n //引用 })
模板
当前语言: {{ lang }}{{ $t("hello", { name:"vue" } ) }}
script
export default { name: "testLang", methods: { toggleLang () { let lang = this.$i18n.locale //当前语言 this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新设置 } }, computed: { lang () { switch (this.$i18n.locale) { case "zh_CN": return "中文"; case "en_US": return "英文"; default: return "其他"; } } } }
效果和cdn方式一样
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106504.html
摘要:前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然,也督促自己产出一篇相关的文章,来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言 上个月月底@D2开源组 开源了使用 D2Admin 适配 人人企业版(专业版) 的...
摘要:程序员到底要学什么程序员到底要学什么或者说,程序员到底要学多少东西呢这个问题问到你了吗今天就来简单聊一聊程序员的学习之路。程序员的种类很多,这里只讲前端工程师和后端工程师,因为自己也就接触到这两个层面。 ...
阅读 1123·2023-04-26 01:35
阅读 2476·2021-11-02 14:44
阅读 7420·2021-09-22 15:38
阅读 2177·2021-09-06 15:11
阅读 3590·2019-08-30 15:53
阅读 764·2019-08-29 16:54
阅读 603·2019-08-26 13:48
阅读 1651·2019-08-26 13:47