当前位置 主页 > 网站技术 > 代码类 >

    vue中英文切换实例代码

    栏目:代码类 时间:2020-01-21 18:10

    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:'注册',
        loginUsername:'请输入邮箱/手机号',
      }
    }
    
    【src/components/language/en.js】
    module.exports = {
      language: {
        name: '中文'
      },
      user: {
        login:'login',
        register:'register',
        loginUsername:'please input email or phone',
      }
    }

    3、在main.js下引入及注册vue-i18n

    //中英文切换
    import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    const i18n=new VueI18n({
      locale:localStorage.getItem('languageSet')||'zh',  //从localStorage里获取用户中英文选择,没有则默认中文
      messages:{
        'zh':require('./components/language/zh'),
        'en':require('./components/language/en')
      }
    })
    
    new Vue({
      el: '#app',
      router,
      i18n,  //把 i18n 挂载到 vue 根实例上
      components: {
        App
      },
      render: h => h(App),
    })

    4、使用

    <template>
      <span>{{$t('user.login')}}</span>  //登录
      <input type="text" :placeholder="$t('user.loginUsername')" v-model="username" />  //输入账号
    
      <div @click="changeLanguage()">{{$t('language.name')}}</div>  //切换中英文的按钮
    </template>
    
    <script>
      methods:{
        changeLanguage(){
          this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'  //设置中英文模式
          localStorage.setItem('languageSet',this.$i18n.locale)  //将用户设置存储到localStorage以便用户下次打开时使用此设置
        },
      }
    <script>

    以上就是本次介绍的全部相关知识点,感谢大家的学习和对IIS7站长之家的支持。