translate-vue.js 513 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <i18n>
  2. {
  3. "en": {
  4. "hello": "hello world!"
  5. },
  6. "ja": {
  7. "hello": "こんにちは、世界!"
  8. }
  9. }
  10. </i18n>
  11. <template>
  12. <div id="app">
  13. <label for="locale">locale</label>
  14. <select v-model="locale">
  15. <option>en</option>
  16. <option>ja</option>
  17. </select>
  18. <p>message: {{ $t('hello') }}</p>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'app',
  24. data () {
  25. this.$i18n.locale = 'en';
  26. return { locale: 'en' }
  27. },
  28. watch: {
  29. locale (val) {
  30. this.$i18n.locale = val
  31. }
  32. }
  33. }
  34. </script>