利用vue-i18n实现多语言切换

本文介绍了如何使用vue-i18n进行多语言切换,包括命名式、列表式和ruby on rails i18n格式的带参数词条,以及语言切换的实现方法,如获取浏览器语言和利用vuex管理语言状态。
摘要由CSDN通过智能技术生成

普通词条


插值表达式中向$t方法传入词条的key值就可以了,是不是超级简单

普通文本:{ {$t('helloworld')}}

带参数词条


带参数词条也有几种写法,分别有命名式,列表式,ruby on rail式。

命名式

在词条中指定命名参数,参数由花括号包裹,如:

// 定义词条

helloman: ‘hello {name}’

模板引用词条时,$t方法可以接收传入两个参数,第一个入参为词条key值,第二个入参是词条参数的key-value键值对。

// 引用词条

{ {$t('helloman', {name: 'Tom'})}}

列表式

列表式其实与数组的概念一致。词条定义时,通过数组下标鉴别接收的参数。

// 定义词条

helloman: ‘hello {0}’

模板中,则将对象改由数组传入

// 引用词条

{ {$t('helloman', [‘Tom’])}}

// 还可以这样,用array-like object的形式传入。

{ {$t('helloman', {'0': '
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值