Vue.js中的$ t是什么

Question

有史以来第一次合作，Vue.js不知道什么是什么$t。例如我有这样的人的代码：

 <li class="category-filter__back">
   <button
     class="category-filter__button"
     @click="back(categoryPath)">
     {{ $t(backButtonText) }} <<<<<<<< what is this $t?
   </button>
 </li>

似乎找不到任何具体答案。

Answer 1

这里的 $t 应该是Vue I18n的扩展 Vue 实例方法。

这是一个关于 jsfiddle的例子：

模板

<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>

脚本

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'
    }
  }
})

Answer 2

它看起来像一个翻译功能。也许是这样：http : //kazupon.github.io/vue-i18n？