HTML笔记 ·

基于VUE国际化(二)

上一篇文章中介绍了vue使用i18n的基本操作,接下来说一下其他的操作。比如在项目开发过程中,某些文字中间包含html标签,此时我们不想让标签变成字符串,而是实实在在的标签,该怎么做呢,下面我们一英文语言包为例。语言包增加了一个helHtml字段。

export default {
	ya: "hello",
	website: "luofanting",
        helHtml:"hello <br> world"
}

在使用的时候只需要使用v-html即可

<h1 v-html=' $t("helHtml")'></h1>

还有另一种情况,就是我们的文字当中有变量存在,比如说网站欢迎语,欢迎xxx访问。这时就使用到了占位符的作用,下面还是以英文语言包为例

export default {
	ya: "hello",
	website: "luofanting",
        helHtml:"hello <br> world",
        zhanwei:"welcome to {name}'s visite "
}

在使用的时候就需要添加一个参数

<div>
   {{$t('zhanwei',{name:'落帆亭'})}}
</div>

更多其他用法请参考官网http://kazupon.github.io/vue-i18n/guide/formatting.html#html-formatting

参与评论