码迷,mamicode.com
首页 > 其他好文 > 详细

《Vue项目关于i18n双语切换》

时间:2020-05-13 12:37:22      阅读:55      评论:0      收藏:0      [点我收藏+]

标签:后端   hang   决定   完整   就是   问题   save   ati   mic   

  想了蛮久,决定还是写一篇记录一下i18n这个可以进行多语言切换的插件!

  一,安装

    npm install vue-i18n --save

     二,入口文件main.js

    技术图片

 

 

  三,双语文件:

    可以通过自己后端的接口调,也可以自己写文件

    技术图片

 

 

     技术图片

     中文的

 

    技术图片

 

     英文的

 

     四,i18n的用法

      1.普通调用:

         <div>{{$t(‘m.dou‘)}}</div>
        <span v-text="$t(‘nav.home‘)"></span>
      2.数组for循环:
        技术图片

 

         技术图片

 

         因为东西有些多,就没有截完整computed里的数据了,这里肯定会说,哎,为什么不在data里写要去computed里勒?因为放data里进行多语言切换是没有效果的,它是一次性的,不会随之响应!

 

    五,点击切换

      

        <tab-item @click.native="changeLang">{{$t(‘m.changLang‘)}}</tab-item>
  
        技术图片

 

 

 

     我在用i18n的时候,碰到了一个问题,就是当我们用模态框的时候,多语言切换要怎么去解决?

        

《Vue项目关于i18n双语切换》

标签:后端   hang   决定   完整   就是   问题   save   ati   mic   

原文地址:https://www.cnblogs.com/kitty-chan/p/12881144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!