python中英文切换_vue根据按钮进行中英文切换

刚学习vue不久，所以对vue了解还不是很深，一直处于边做边查的状态，这几天开发一个双语网站。

内容如下，希望对大家有帮助。

安装 vue-i18n插件npm install vue-i18n

1.首先是引进i18n

1.首先是引进i18n

然后在index.js中

import VueI18n from 'vue-i18n'

import Vue from 'vue'

Vue.use(VueI18n)

const i18n = new VueI18n({

locale: 'cn', // 语言标识

messages: {

'cn': require('./lang/cn'), // 中文语言包

'en': require('./lang/en') // 英文语言包

},

})

export default i18n

cn.js以及en.js中写入需要用到的中英文翻译内容

在main,import i18n from './i18n'//引入配置文件

new Vue({

el: '#app',

router,

store,

i18n: i18n,

render: h => h(App)

})

2.在用到英文切换的模板中添加

由于此项目是在中文状态下默认显示英文按钮，在英文状态下显示中文按妞，所以这里的代码如下

(1)导航处

{{lang}}

静态文案的地方

{{ $t("message.index") }}

//{{ $t("message.index") }}放你需要的翻译的内容

此项目中由于后端要求中英文返回的值为0和1，所以此处用到了$cookie

export default {

data () {

return {

locale: 'cn',

lang:'ENG'

}

},

methods: {

changeLang () {

// 增加传入语言

if(this.locale=='cn'){

this.lang='ENG';

this.locale='en';

}else{

this.lang='中文';

this.locale='cn';

}

this.$cookie.set('lng', this.locale=='cn'?'0':'1', 1);

window.location.reload();//进行刷新改变cookie里的值

}

},

mounted() {

if(this.$cookie.get('lng')=='0'){

this.locale='cn';

this.lang='ENG';

}else{

this.locale='en';

this.lang='中文';

}

this.$cookie.set('lng', this.locale=='cn'?'0':'1', 1);

},

watch: {

locale (val) {

this.$i18n.locale = val;

console.log("locale",val);

}

}

}