vue-i18n的国际化缩减版示例（真实有效）

最新推荐文章于 2023-02-24 14:08:14 发布

Yetian_2000

最新推荐文章于 2023-02-24 14:08:14 发布

阅读量196

点赞数

分类专栏： JS vue

本文链接：https://blog.csdn.net/Yetian_2000/article/details/112236062

版权

JS 同时被 2 个专栏收录

63 篇文章 2 订阅

订阅专栏

vue

50 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-i18n国际化缩减版</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<style>
.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
    <p>{{message}}</p>
    <p>{{$t('common.add')}}</p>
</div>
<script type = "text/javascript">
//zh与en必须是json格式
const zh = {
    "common.edit": "编辑",
     "common.add": "添加",
     "common.config": "配置",
     }
const en = {
    "common.edit": "edit",
    "common.add": "add",
    "common.config": "config",
    }
const i18n = new VueI18n({ 
	 locale: 'zh', // 定义默认语言为中文 
	 messages: {   
	    'zh': zh,  
	    'en': en 
	 }
});

var vm = new Vue({
    el: '#databinding',
    i18n,
    data: {
        message:"信息化建设",
    },
    mounted:function(){
        console.log(this.$t('common.add'))//在js中这样获取国际化this.$t('xxx'),在html中{{$t('xxx')}}这样获取国际化文件。
    }

});
</script>
</body>
</html>

Yetian_2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-i18n的国际化缩减版示例（真实有效）

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue-i18n国际化缩减版</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i
复制链接

扫一扫