vue-i18n_Vue滤镜扩展适用于Vue-i18n

vue-i18n

vue-i18n过滤器 (vue-i18n-filter)

filter support extend for vue-i18n.

过滤器支持扩展到vue-i18n。

安装 (Install)

npm install vue-i18n-filter

用法 (Usage)

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueI18nFilter from 'vue-i18n-filter'

Vue.use(VueI18n)
Vue.use(VueI18nFilter)

{{ 'message.hello' | t }}
{{ 'message.greeting2' | t({ name: 'kazupon' }) }}

t，te，tc (t, te, tc)

vue-i18n-filter add filter in Vue components. Filters t, te, tc equal to $t, $te, $tc in vue-i18n

vue-i18n-filter filter在Vue组件中添加过滤器。 在vue-i18n过滤t ， te ， tc等于$t ， $te ， $tc

{{ 'message.hello' | t }} // equal to $t('message.hello')

为什么要使用过滤器 (Why use filter)

{{ $t('message.hello') | cap }}

v.s

与

{{ 'message.hello' | t | cap }}

例 (Example)

var message = {
    ja: {
        message: {
          hello: 'こんにちは、世界',
          greeting: 'やあ！',
          greeting2: 'やあ {name}！',
          apple: '林檎ってしまった | one 林檎 | {count}の林檎'
        }
      }
}

{{ 'message.hello' | t }}

こんにちは、世界

世界，世界

{{ 'message.greeting2' | t({ name: 'kazupon' }) }}

やあ kazupon！

zu kazupon！

{{ 'message.hello' | te('en') }}

true

真正

{{ 'message.apple' | tc(0) }}

林檎ってしまった

林檎ってしまった

{{ 'message.apple' | tc(10, { count: 10 }) }}

10の林檎

10の林檎

翻译自: https://vuejsexamples.com/vue-filter-extend-for-vue-i18n/

vue-i18n