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

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

Answer 2

这里的$ t应该是Vue I18n的an extended Vue instance method。

这是jsfiddle上的an example：

模板

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

Vue.js中的$ t是什么

2 个答案: