vue根据按钮进行中英文切换

yvonne 发布于2019-08-22 11:13 / 1539人阅读

摘要：刚学习不久，所以对了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。内容如下，希望对大家有帮助。

刚学习vue不久，所以对vue了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。
内容如下，希望对大家有帮助。
安装 vue-i18n插件npm install vue-i18n

1.首先是引进i18n

1.首先是引进i18n

然后在index.js中

import VueI18n from "vue-i18n"
import Vue from "vue"

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: "cn",    // 语言标识
    messages: {
        "cn": require("./lang/cn"),   // 中文语言包
        "en": require("./lang/en")    // 英文语言包
    },
})

export default  i18n

cn.js以及en.js中写入需要用到的中英文翻译内容
在main,import i18n from "./i18n" //引入配置文件

new Vue({
  el: "#app",
  router,
  store,
    i18n: i18n,
  render: h => h(App)
})

2.在用到英文切换的模板中添加

由于此项目是在中文状态下默认显示英文按钮，在英文状态下显示中文按妞，所以这里的代码如下
（1）导航处

{{lang}}

静态文案的地方


{{ $t("message.index") }}

//{{ $t("message.index") }}放你需要的翻译的内容

此项目中由于后端要求中英文返回的值为0和1，所以此处用到了$cookie

云服务器 GPU云服务器根据应用负载进行弹性扩容 html进行图片切换 jquery按钮切换 html按钮样式切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91986.html

vue根据按钮进行中英文切换

摘要：刚学习不久，所以对了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。内容如下，希望对大家有帮助。刚学习vue不久，所以对vue了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。内容如下，希望对大家有帮助。安装 vue-i18n插件npm install vue-i18n 1.首先是引进i18n showImg(https://segmentfault.c...

lifesimple 2019-08-01 17:52 评论0 收藏0
vue，使用vue-i18n实现国际化

摘要：需求公司项目需要国际化，点击按钮切换中文英文安装注入实例中，项目中实现调用和模板语法语言标识通过切换的值来实现语言切换中文语言包英文语言包最后对应语言包中文语言包首页概览公司概述财务报表更多附录主要财务指标对比分析新闻事件档案需求公司项目需要国际化，点击按钮切换中文/英文 1、安装 npm install vue-i18n --save 2、注入 vue 实例中，项目中实现调用 ...

jsummer 2019-08-22 16:05 评论0 收藏0
Calendar -『为移动端而生』的自定义日历

摘要：，欢迎使用中文文档在后面自我介绍是为了满足移动端对各种场景的需求而生的，兼容性强，灵活度高。如空数组默认设置成当月日数组的每一位分别是年月日。 Calendar - A Flexible Calendar for Mobile Intro Calendar was born for several product requirements in the mobile. It’s f...

MycLambert 2019-08-29 12:40 评论0 收藏0
Calendar -『为移动端而生』的自定义日历

摘要：，欢迎使用中文文档在后面自我介绍是为了满足移动端对各种场景的需求而生的，兼容性强，灵活度高。如空数组默认设置成当月日数组的每一位分别是年月日。 Calendar - A Flexible Calendar for Mobile Intro Calendar was born for several product requirements in the mobile. It’s f...

Gu_Yan 2019-08-20 16:52 评论0 收藏0