vue Chinese and English switching instance code

yarn add vue-i18n or npm install vue-i18n --save-dev

【src/components/language/】
 = {
  language: {
    name: 'English'
  },
  user: {
    login:'Log in',
    register:'register',
    loginUsername:'Please enter your email/mobile phone number',
  }
}

【src/components/language/】
 = {
  language: {
    name: 'Chinese'
  },
  user: {
    login:'login',
    register:'register',
    loginUsername:'please input email or phone',
  }
}

// Switch in Chinese and Englishimport VueI18n from 'vue-i18n'
(VueI18n)
const i18n=new VueI18n({
  locale:('languageSet')||'zh',  //Get the user's Chinese and English selection from localStorage, if not, the default Chinese is  messages:{
    'zh':require('./components/language/zh'),
    'en':require('./components/language/en')
  }
})

new Vue({
  el: '#app',
  router,
  i18n,  //mount i18n to the vue root instance  components: {
    App
  },
  render: h => h(App),
})

<template>
  <span>{{$t('')}}</span>  //Log in  <input type="text" :placeholder="$t('')" v-model="username" />  //Enter account number
  <div @click="changeLanguage()">{{$t('')}}</div>  //Toggle the Chinese and English button</template>

<script>
  methods:{
    changeLanguage(){
      this.$=='zh'?this.$='en':this.$='zh'  //Set Chinese and English mode      ('languageSet',this.$)  //Save user settings to localStorage so that users can use this setting next time they open it    },
  }
<script>