0
点赞
收藏
分享

微信扫一扫

vue-i18n实现国际化的语言切换用法

鲤鱼打个滚 2022-06-16 阅读 61

我们可以使用vue-i18n实现国际化。

语言切换用法如下:

静态渲染:

1.将属性值前加上冒号,用$t('xx.yy')进行语言切换。

<el-form-item
:label="$t('visitorRecord.name')"
prop="hostName"
label-width="60px"
>
<el-col :span="18">
<el-input
v-model="searchName"
:rows="3"
clearable
type="text"
:placeholder="$t('visitorRecord.enterName')"
/>
</el-col>
</el-form-item>

2.用双花括号加$t('xx.yy')进行语言切换。

<el-dropdown-item command="">{{$t('common.all')}}</el-dropdown-item>

动态渲染:

即在js中用this.$t('xx.yy')进行语言切换。

this.dropValue = this.$t('common.all')

ps:

this.$te这个方法用以判断需要翻译的key在你提供的语言包中是否存在。

应用示例为

export function generateTitle(title) {
const hasKey = this.$te('route.' + title)
if (hasKey) {
const translatedTitle = this.$t('route.' + title)
return translatedTitle
}
return title
}

 


举报

相关推荐

0 条评论