So wechseln Sie die Landessprache in Vue

Dieses Mal zeige ich Ihnen, wie Sie die Landessprache in Vue wechseln und welche Vorsichtsmaßnahmen für den Wechsel der Landessprache in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Im Entwicklungsprozess basierend auf dem Vue-Cli-Projekt kann die mehrsprachige Umschaltfunktion das Vue-i18-Plug-In verwenden. Die spezifische Implementierungsmethode ist wie folgt:

Schritt 1: Installieren Sie vue-i18 im Projekt-Plug-in

Schritt 3: Verwenden Sie es auf der Seite

Bei der Verwendung in Vorlagen gibt es wahrscheinlich die folgenden drei Situationen. Wenn es Auslassungen gibt, korrigieren Sie mich bitte

zh.js

cnpm install vue-i18n --save-dev

en.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 
 }, 
})

1) Als Textinhalt im Tag

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

2) Als Tag-Attribut

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

3) Bei Verwendung als chinesischer js-Text

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

4) Hinzuzufügen ...

Schritt 4: Wechseln Sie zwischen Chinesisch und Englisch auf der Seite und binden Sie Ereignisse an die Schaltfläche zum Umschalten zwischen Chinesisch und Englisch wie folgt:

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

An diesem Punkt ist die Verwendung des vue-i18n-Plug-Ins abgeschlossen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So ermitteln Sie die absolute Position von DOM-Elementen in der Front-End-Schnittstelle

Anleitung Angular-Code optimieren

Das obige ist der detaillierte Inhalt vonSo wechseln Sie die Landessprache in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!