vue-i18n实现中英文切换的方法

1.下载

npm install vue-i18n

2.创建中英文包

2.1 中文包

2.2 英文包

3.在main里面引入

import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale:
    localStorage.getItem("lang") == (undefined || "" || null)
      ? "zh"
      : localStorage.getItem("lang"),
  messages: {
    zh: require("../static/lang/text-zh.json"),
    en: require("../static/lang/text-en.json")
  }
});

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

4.在组件中使用

<div>{{ $t('footer.home') }}</div>
或者
<input type="span" value="" :placeholder="$t('footer.home')" v-model="search" />
或者
this.$toast(this.$t('footer.home'))

5.使用按钮进行手动切换，这里我用了switch用true和false来识别中英文，用这种方法也可以用于其他语言切换

<switch @change="changeEn" :checked="zhOren" />

changeEn(e) {
            if (e.target.value) {
                //中文
                this._i18n.locale = 'zh';
                localStorage.setItem('lang', 'zh');
            } else {
                //英文
                this._i18n.locale = 'en';
                localStorage.setItem('lang', 'en');
            }
        }

以上就是vue-i18n实现中英文切换的方法的详细内容，更多关于vue 中英文切换的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue 使用vue-i18n做全局中英文切换的方法

    1.vue-i18n安装 npm install vue-i18n --save-dev 2.在main.js文件中引入 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言 messages: { ' zh': require

  • vue中英文切换实例代码

    1.安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2.在src/components下新建文件夹language,并在文件夹language下新建zh.js及en.js [src/components/language/zh.js] module.exports = { language: { name: 'English' }, user: { login:'登录', register:'注册', logi

  • vue-i18n实现中英文切换的方法

    1.下载 npm install vue-i18n 2.创建中英文包 2.1 中文包 2.2 英文包 3.在main里面引入 import VueI18n from "vue-i18n"; Vue.use(VueI18n); const i18n = new VueI18n({   locale:     localStorage.getItem("lang") == (undefined || "" || null)       ? "

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • vue axios 在页面切换时中断请求方法 ajax

    如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

  • VUE项目实现主题切换的多种方法

    需求是 做一个深色主题和浅色主题切换的效果 方法一 多套css 这个方法也是最简单,也是最无聊的. <!-- 中心 --> <template> 动态获取父级class名称,进行一个父级class的多次定义 <div :class="className"> <div class="switch" v-on:click="chang()"> {{ className == "box"

  • VUE的tab页面切换的四种方法

    VUE的tab页面切换的四种方法

    1.静态实现方法: 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt

  • Vue鼠标滚轮滚动切换路由效果的实现方法

    Vue鼠标滚轮滚动切换路由效果的实现方法

    一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡 <transition :name="transitionName"> <div></div> </transition> 使用transition 包裹需

随机推荐