成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue中使用國際化基礎(chǔ)使用

Kosmos / 2963人閱讀

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

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 //當(dāng)前語言
            this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新設(shè)置
        }
    },
    computed: {
        lang: function(){
            switch (this.$i18n.locale) {
                case "zh_CN": return "中文";
                case "en_US": return "英文";
                default: return "其他";
            }
        }
    }
})

html


    
當(dāng)前語言: {{ lang }}

    
{{ $t("hello", { name:"vue" } ) }}

3.效果

vue-cli項(xiàng)目中使用

1.安裝
npm install vue-i18n

2.使用
入口文件main.js增加以下代碼

import VueI18n from "vue-i18n"
Vue.use(VueI18n)

// 可以創(chuàng)建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 //當(dāng)前語言
            this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新設(shè)置
        }
    },
    computed: {
        lang () {
            switch (this.$i18n.locale) {
                case "zh_CN": return "中文";
                case "en_US": return "英文";
                default: return "其他";
            }
        }
    }
}

效果和cdn方式一樣

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106504.html

相關(guān)文章

  • 記一次開源學(xué)習(xí)--D2Admin 人人企業(yè)版

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

    notebin 評論0 收藏0

  • 程序員到底要學(xué)什么？

    摘要：程序員到底要學(xué)什么程序員到底要學(xué)什么或者說，程序員到底要學(xué)多少東西呢這個問題問到你了嗎今天就來簡單聊一聊程序員的學(xué)習(xí)之路。程序員的種類很多，這里只講前端工程師和后端工程師，因?yàn)樽约阂簿徒佑|到這兩個層面。 ...

    mo0n1andin 評論0 收藏0

  • 第三方庫

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

    seanHai 評論0 收藏0

  • 第三方庫

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

    gityuan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<