<ul id="2o0ew"></ul>

vue根據按鈕進行中英文切換

lifesimple 發布于2019-08-01 17:52 / 599人閱讀

摘要：剛學習不久，所以對了解還不是很深，一直處于邊做邊查的狀態，這幾天開發一個雙語網站。內容如下，希望對大家有幫助。

剛學習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按鈕樣式切換

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

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

vue根據按鈕進行中英文切換

摘要：剛學習不久，所以對了解還不是很深，一直處于邊做邊查的狀態，這幾天開發一個雙語網站。內容如下，希望對大家有幫助。剛學習vue不久，所以對vue了解還不是很深，一直處于邊做邊查的狀態，這幾天開發一個雙語網站。內容如下，希望對大家有幫助。安裝 vue-i18n插件npm install vue-i18n 1.首先是引進i18n showImg(https://segmentfault.c...

yvonne 2019-08-22 11:13 評論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