脚本宝典收集整理的这篇文章主要介绍了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
@H_512_68@
cn.js以及en.js中写入需要用到的中英文翻译内容
在main,import i18n from './i18n' //引入配置文件

      

      
      ITle="" data-original-title="复制">
      
      
new Vue({
  el: '#app',
  router,
  Store,
    i18n: i18n,
  render: h => h(App)
})
2.在用到英文切换的模板中添加
由于此项目是在中文状态下默认显示英文按钮，在英文状态下显示中文按妞，所以这里的代码如下
（1）导航处

      

      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{{lang}}" title="" data-original-title="复制">
      
      
<span class="label label-important"  :key="locale?'en':'cn'" @click="changeLang()">{{lang}}</span>
静态文案的地方

      

      
      ;message.index") }}

//{{ $t("message.index") }}放你需要的翻译的内容" title="" data-original-title="复制">
      
      
<li>
<router-link to="/indexCon">{{ $t("message.index") }}</router-link>
</li>
//{{ $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);
        }       
      }
    }
" title="" data-original-title="复制">
      
      
<script>
    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);
        }       
      }
    }
</script>
脚本宝典总结
       
以上是脚本宝典为你收集整理的vue根据按钮进行中英文切换全部内容，希望文章能够帮你解决vue根据按钮进行中英文切换所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。