vue當前頁面中英文語言切換

在開發頁面時，好比就一個頁面，須要切換語言的元素並很少時，咱們就沒必要從外部引入各類插件，包，直接在項目內實現語言切換，以vue項目爲例，下面爲具體實現過程

寫入中英文數據

在vue中，把要展現的中英文數據寫在data中，如下爲頁面代碼，以及要寫入的數據

<template>
  <div class="index-wrapper">
    <div class="ink-header">
      <img class="logo" src="@/assets/logo3.jpg" />
      <div class="header-right">
        <div class="explore">
          <div class="title">{{ texts[currentLanguage].title }}</div>
          <div class="underline"></div>
        </div>
        <div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">簡</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
        </div>
        <div class="login" @click="toLogin" ref="login">
          {{ texts[currentLanguage].login }}
        </div>
      </div>
    </div>
  </div>
</template>
複製代碼

上面爲頁面結構，咱們能夠看到，全部要展現的文字均已綁定值的形式寫出，下面爲data中的數據,咱們能夠給當前頁面設置個默認語言，設爲currentLanguage: 'cn'中文默認語言

data() {
    return {
      currentLanguage: "cn",
      texts: {
        cn: {
          title: "探索",
          login: "登陸",
        },
        en: {
          title: "Explore",
          login: "Login",
        }
      },
    };
  },
複製代碼

文本以一個對象的形式寫在數據中，下面最後一步就是給中英文切換按鈕添加兩個事件。其實事件就是改變currentLanguage的值，便可達到改變語言的目的

HTML：
   <div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">簡</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
   </div>
   
JS：
  changeLang(inlanguage){
      this.currentLanguage = inlanguage
  }
複製代碼

在頁面元素事件中，能夠直接傳入當前頁面元素的標記當作參數，以達到直接改變currentLanguage的目的，做者因爲是個菜鳥，剛開始走了不少彎路，還在頁面元素中加入ref，再在事件中獲取this.$refs,很麻煩不說，尚未成功，下面爲分別點擊「簡」和「En」的效果圖

vue中兩個div切換顏色

在開發此項目時，點擊切換語言時，被選擇的按鈕爲高亮，首先要給兩個div設一個默認顏色，而後斷定currentLanguage是否爲當前language，若是是的話就添加一個class便可，具體實現代碼以下：

<div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">簡</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
        </div>
複製代碼

cn,en初始的style設爲同樣的，並默認爲true,當currentLanguage等於當前選擇時，blue爲true，便可加上高亮顏色，覆蓋初始色，實現點擊換色的目的