原生js实现多语言切换

1.select实现语言选择

中文
language
Язык
Тіл

2.value发生改变调用方法，通过值的不同调用不同html页面
function changelanguage(){
var myselect=document.getElementById(“test”);
var index=myselect.selectedIndex;
var value=myselect.options[index].value;
//判断语言的类型
if (value == ‘Chinese’) {
window.location = ‘Chinese.html’;
} else if(value == ‘English’){
window.location = ‘English.html’;
}else if(value == ‘Russian’){
window.location = ‘Russian.html’
}else{
window.location = ‘Kazakh.html’
}
}
------------------------以上为原生js使用多个html页面切换语言-----------------------------
基于vue框架实现国际化语言切换
1.安装i8n,npm install vue-i18n --save-dev
2.注册i18n,
import VueI18n from ‘vue-i18n’ //引入 vue-i18n
Vue.use(VueI18n); //通过插件的形式挂载
3使用语言包
/---------使用语言包-----------/
const i18n = new VueI18n({
locale: ‘zh’, // 语言标识
//this.KaTeX parse error: Expected 'EOF', got '}' at position 168: …英文语言包 } }̲) 4.挂载不能丢 …i18n.locale = ‘zh’
console.log(this.KaTeX parse error: Expected 'EOF', got '}' at position 21: …locale); }̲ else{ …i18n.locale = ‘ru’
console.log(this.KaTeX parse error: Expected 'EOF', got '}' at position 21: …locale); }̲ // val …t(‘message.zh’), value: 0});
// Vue.set(this.lang, 1, {label: this.KaTeX parse error: Expected 'EOF', got '}' at position 26: ….en'), value: 1}̲) } 7.三…t(‘message.zh’)}}

 //vue组件模板数据绑定的使用<input :placeholder="$t('message.zh')"></input>//vue组件data中赋值的使用data:{msg:this.$t('message.zh');}

原生js实现多语言切换相关推荐

原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js 控制鼠标_原生js实现改变视频播放速率
前言:前几天考研成绩刚刚出来,有人欢喜有人悲,不管结果怎么样,只要努力过,就不存在遗憾一说.大家都知道考研复习的时候会有大量的时间用来看教学视频,就比如说"张宇高数"等等.考研复习 ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...

原生js实现多语言切换

原生js实现多语言切换相关推荐

最新文章

热门文章