vue中使用國際化基礎使用

Kosmos 發布于2019-08-26 10:37 / 2958人閱讀

摘要：方式使用引入要在之后引入使用你好當前語言重新設置中文英文其他當前語言切換語言效果項目中使用安裝使用入口文件增加以下代碼可以創建文件夾，拆分國際化文件最后引入國際化保存對象你好引用模板當前語言切換語言當前語言重新設置中文英文其他效

cdn方式使用

1.引入

vue-i18n要在vue之后引入

2.使用

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.效果

vue-cli項目中使用

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  //引用
})

模板

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方式一樣

GPU云服務器云服務器 vue 中使用 webrtc vue中使用webrtc vue使用webrtc vue怎么使用webRTC

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106504.html

記一次開源學習--D2Admin 人人企業版

摘要：前言上個月月底開源組開源了使用適配人人企業版專業版的前端工程具體詳情見人人企業版適配發布。當然，也督促自己產出一篇相關的文章，來記錄這次有趣的學習之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上個月月底@D2開源組開源了使用 D2Admin 適配人人企業版(專業版) 的...

notebin 2019-05-21 19:46 評論0 收藏0
程序員到底要學什么？

摘要：程序員到底要學什么程序員到底要學什么或者說，程序員到底要學多少東西呢這個問題問到你了嗎今天就來簡單聊一聊程序員的學習之路。程序員的種類很多，這里只講前端工程師和后端工程師，因為自己也就接觸到這兩個層面。 ...

mo0n1andin 2021-09-28 09:36 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評論0 收藏0