uniapp 使用vue-i18n实现传入变量国际化

最新推荐文章于 2024-06-22 11:03:07 发布

Rlm*

最新推荐文章于 2024-06-22 11:03:07 发布

阅读量672

点赞数 4

分类专栏： vue + uni-app 文章标签： vue.js uni-app 前端

本文链接：https://blog.csdn.net/renlimin1/article/details/136472509

版权

vue + uni-app 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章介绍了如何在Vue组件中使用国际化插件如`zh-ch.js`和`en.js`，实现文本中的变量替换，包括直接插入变量和通过HTML模板slot插入变量的方法。

摘要由CSDN通过智能技术生成

实现传入变量，做对应的国际化

zh-ch.js

export default {
  "my.ll": "你好，我是{name},性别：{sex}"
}

en.js

export default {
    "my.ll": "Hello, I am {name},sex:{sex}"
}

一、直接插入变量

Vue组件中使用如下：

 <p>{{$t('my.ll', {name:'123',sex:'666'})}}</p>

二、变量以HTML的形式插入

<template>
    <div>
        <span>Hello,</span>
        <i18n path="my.ll" :tag="false">
          <template slot="name">
            <span style="color:red">1231</span>
          </template>
          <template slot="sex">
            <span style="color:red">888</span>
          </template>
        </i18n>
    </div>
</template>