第一次与Vue.js
合作,不知道$t
是什么。例如,我的某人代码如下:
<li class="category-filter__back">
<button
class="category-filter__button"
@click="back(categoryPath)">
{{ $t(backButtonText) }} <<<<<<<< what is this $t?
</button>
</li>
似乎无法找到任何具体答案。
答案 0 :(得分:6)
它看起来像一个翻译功能。也许是这样:http://kazupon.github.io/vue-i18n?
答案 1 :(得分:1)
这里的$ 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'
}
}
})