Vue

by jyougo

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="app">
  <!-- string literal -->
  <p v-t="'hello'"></p>
  
  <!-- keypath biniding via data -->
  <p v-t="path"></p>
  
  <!-- extended Vue instance method -->
  <p>{{ $t("wait") }}</p>
    
  <button @click="changeLocale()">
    {{ $t("buttonText") }}
  </button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

p {
  margin: 8px 0;
}

JavaScript

new Vue({
  el: '#app',
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi there', bye: 'see you later', wait: 'just a minute', buttonText: 'Change to Chinese Locale' },
      cn: { hello: '你好', bye: '再见', wait: '稍等一下', buttonText: '更改为英文场景' }
    }
  }),
  data: { path: 'bye' },
  methods: {
  	changeLocale() {
    	this.$i18n.locale = this.$i18n.locale === 'en' ? 'cn' : 'en'
    }
  }
})