How to switch national language in Vue-JS Tutorial-php.cn

How to switch national language in Vue

php中世界最好的语言

Release： 2018-06-06 10:48:23

Original

3672 people have browsed it

This time I will show you how to switch the national language in Vue, and what are the precautions for switching the national language in Vue. The following is a practical case, let's take a look.

In the development process based on vue-cli project, the multi-language switching function can use the vue-i18 plug-in. The specific implementation method is as follows:

step1: Install vue-i18 in the project Plug-in

cnpm install vue-i18n --save-dev

Copy after login

step2: Introduce the vue-i18n plug-in into the project’s entry file main.js

import Vue from 'vue' 
import router from './router' 
import VueI18n from 'vue-i18n' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: 'zh', // 语言标识 
 messages: { 
  'zh': require('./assets/lang/zh'), 
  'en': require('./assets/lang/en') 
 } 
}) 
// vue实例中引入 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 i18n, 
 router, 
 template: '<Layout/>', 
 components: { 
  Layout 
 }, 
})

Copy after login

step3: Use ## in the page

#When used in templates, there are probably the following three situations. If there are any omissions, please correct me

zh.js

module.exports = { 
 menu : { 
   home:"首页" 
 }, 
 content:{ 
   main:"这里是内容" 
 } 
}

Copy after login

en.js

module.exports = { 
 menu : { 
   home:"home" 
 }, 
 content:{ 
   main:"this is content" 
 } 
}

Copy after login

1) As the text content in the tag

<p class="title">{{$t('menu.home')}}</p>

Copy after login

2) As the tag attribute, use

<input :placeholder="$t(&#39;content.main&#39;)" type="text">

Copy after login

3) When using it as js Chinese text

console.log(this.$t('content.main'));

Copy after login

4) To be added ...

step4: Switch between Chinese and English on the page, and bind events to the button for switching between Chinese and English, as follows:

tabEn: function () { 
 this.$i18n.locale = 'en' 
}, 
tabCn: function () { 
 this.$i18n.locale = 'zh' 
}

Copy after login

At this point, the use of the vue-i18n plug-in is completed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!