在开发页面时,好比就一个页面,须要切换语言的元素并很少时,咱们就没必要从外部引入各类插件,包,直接在项目内实现语言切换,以vue项目为例,下面为具体实现过程vue
写入中英文数据
在vue中,把要展现的中英文数据写在data中,如下为页面代码,以及要写入的数据
{{ texts[currentLanguage].login }}
复制代码
上面为页面结构,咱们能够看到,全部要展现的文字均已绑定值的形式写出,下面为data中的数据,咱们能够给当前页面设置个默认语言,设为currentLanguage: 'cn'中文默认语言bash
data() {
return {
currentLanguage: "cn",
texts: {
cn: {
title: "探索",
login: "登陆",
},
en: {
title: "Explore",
login: "Login",
}
},
};
},
复制代码
文本以一个对象的形式写在数据中,下面最后一步就是给中英文切换按钮添加两个事件。其实事件就是改变currentLanguage的值,便可达到改变语言的目的app
HTML:
JS:
changeLang(inlanguage){
this.currentLanguage = inlanguage
}
复制代码
在页面元素事件中,能够直接传入当前页面元素的标记当作参数,以达到直接改变currentLanguage的目的,做者因为是个菜鸟,刚开始走了不少弯路,还在页面元素中加入ref,再在事件中获取this.$refs,很麻烦不说,尚未成功,下面为分别点击“简”和“En”的效果图ui
vue中两个div切换颜色
在开发此项目时,点击切换语言时,被选择的按钮为高亮,首先要给两个div设一个默认颜色,而后断定currentLanguage是否为当前language,若是是的话就添加一个class便可,具体实现代码以下:this
复制代码
cn,en初始的style设为同样的,并默认为true,当currentLanguage等于当前选择时,blue为true,便可加上高亮颜色,覆盖初始色,实现点击换色的目的spa