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

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

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

安装 vue-i18n插件npm install vue-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)导航处

静态文案的地方

//{{ $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);

}

python中英文切换_vue根据按钮进行中英文切换相关推荐

vue两个按钮切换_vue实现按钮切换图片
本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下 Tab选项卡实现步骤 1.实现静态UI效果用传统的方式实现标签结构和样式 2.基于数据重构UI效果将静态的结构和样 ...
FLASK点击按钮实现中英文切换
点击按钮实现中英文切换 1. 前端按钮代码使用a标签连接url <div style="float:right; background-color: white; margin-to ...
点击按钮实现页面切换中英文
我们在开发项目中,有时候需要切换不同的语言,有的人用英文,有的人使用繁体字,有的人使用简体字,下面我们来使用按钮达到一个切换语言的效果...在android系统的设置中有这个选项,我们选择之后系统里面 ...
谷歌拼音输入法PinyinIME源码修改----随着Setting中中英文的切换对应改变软键盘中英文输入且字符变换
项目中使用的是Google的输入法:谷歌拼音输入法,即PinyinIME. 客户提出需求:需要在Setting中切换中英文的时候,输入法对应成中英文输入,并且字符也对应成中英文,即Setting中设置 ...
原生微信小程序实现中英文切换（内涵Vant Weapp+语言切换完整项目）
一.在 utils 文件夹中新建两个语言包基础库 js 文件 1.Chinese.js //中文语言包 var Chinese = {content:"你好世界",informat ...
vue 使用vue-i18n实现中英文语言切换，以及动态添加中英文
一.安装. npm install vue-i18n 二.使用.(这里只写了核心代码) main.js引入: // 引入插件和语言包 import VueI18n from 'vue-i18n' im ...
android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
python现在最新的版本-Python 3.8 已发布，现在是切换至新版本的好时机吗？
Python 3.8 已于前两周正式发布,不过目前大多数开发者主要使用的仍是 Python 3.7.x 或更旧的版本.事实上,立刻切换到使用 Python 3.8 可能会引发一些问题. 想知道何时切换 ...
python版本越高越好吗-Python 3.8 已发布，现在是切换至新版本的好时机吗？
Python 3.8 已于前两周正式发布,不过目前大多数开发者主要使用的仍是Python 3.7.x或更旧的版本.事实上,立刻切换到使用Python 3.8可能会引发一些问题. 想知道何时切换至Pyt ...

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

python中英文切换_vue根据按钮进行中英文切换相关推荐

最新文章

热门文章