900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 原生js实现多语言切换

原生js实现多语言切换

时间:2021-05-06 03:50:15

相关推荐

原生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');}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。