2024年利用vue-i18n实现多语言切换(1),web前端面试题最新

总结

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

new Vue({

el: ‘#app’,

router,

store,

i18n,

components: { App },

template: ‘’

})

当然,我们还要新建两个词条文件static/lang/zh.js和static/lang/en.js

// zh.js

module.exports = {

helloworld: ‘你好,世界’,

helloman: ‘你好,{name}’,

iphones: ‘苹果5 | 苹果6 | 苹果7’

}

// en.js

module.exports = {

helloworld: ‘hello world’,

helloman: ‘hello {name}’,

iphones: ‘iphone5 | iphone6 | iphone7’

}

模板中使用词条

=========================================================================

普通词条


插值表达式中向$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': 'Tom'})}}

ruby on rails i18n format

与命名式方法是类似的,定义词条略有不同

// 定义词条

helloman: ‘hello %{name}’

而模板上引用词条的方式是一样的,用key-value的方式传入。

多元化


一个词条的key值可以对应多个value信息,此时可以通过vue-i18n的管道pipe来实现。

例如:

iphones: ‘{n} iphone5 | iphone6 | iphone7’

这里定义了三个value,第一个value还是带参数的。

在模板上的调用方式也有了不同,需要用$tc方法来引用词条。

Pluralization:{{$tc('iphones', 0, {n: '3台'})}}

// 输出 Pluralization:3台 iphone5

Pluralization:{{$tc('iphones', 1)}}

// 输出 Pluralization:iphone6

语言切换

======================================================================

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值