在开发页面时，比如就一个页面，需要切换语言的元素并不多时，我们就不必从外部引入各种插件，包，直接在项目内实现语言切换，以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，即可加上高亮颜色，覆盖初始色，实现点击换色的目的