vue-i18n 的使用

2023-11-10

一、安装

安装 Vue-i18n 插件。您可以使用以下命令进行安装:

npm install vue-i18n@next --save

//安装:
npm install vue-i18n@next --save --legacy-peer-deps

added 6 packages, and audited 1051 packages in 41s

158 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

二、使用

在 src 下创建 lang 文件夹。

1、准备语言包

本例我准备了两种语言包,分别是中文和英文:cn、en。在 lang 下创建两个文件,cn.js 和 en.js。

在cn.js文件中,可以定义以下内容:

export default {
  message: {
     hello: '你好、世界',
     name: '你好、{name},欢迎来到{place}',
     apple: '没有苹果 | 一个苹果 | {count}个苹果',
     banana:'没有香蕉 | {n}香蕉 - ¥{n} | {n}香蕉 - ¥{n}'
  }
}

在en.js文件中,可以定义以下内容:

export default {
  message: {
    hello: 'hello world',
    name: 'hello {name}, welcome to {place}',
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana - ¥{n} | {n} bananas - ¥{n}'
  }
}

2、准备翻译的语言环境

在 lang 下创建 index.js,使用如上的两种语言包。

import { createI18n } from 'vue-i18n'
import en from '.en.js'
import cn from '.cn.js'

const i18n = createI18n({
  locale: 'en', // 设置当前语言为英语
  messages: {
    en: en, // 将英语语言文件添加到Vue-i18n实例中
    cn: cn // 将中文语言文件添加到Vue-i18n实例中
  }
})

export default i18n

3、实现语言翻译

在 main.js 中将 i18n 注入 vue 中

import i18n from './lang'

const app = createApp(App)
app.use(i18n)

app.use(store).use(router).mount('#app')

4、使用方式

在组件中使用文本和翻译。可以使用 $t 方法来获取文本和翻译。例如在模板中,可以使用以下方式显示文本:

<p>{{ $t('message.hello') }}</p>

还可以使用$t方法来获取带有占位符的文本,例如:

<p>{{ $t('message.name', { name: 'Alice', place: "Vue" }) }}</p>

这将根据当前语言环境显示带有占位符的文本,并将占位符替换为name属性中的值。

$tc 用于复数,例如英文一般分单复数

<p>{{ $tc('message.apple', 0) }}</p>
<p>{{ $tc('message.apple', 1) }}</p>
<p>{{ $tc('message.apple', 2) }}</p>

<p>{{ $tc('message.banana', 0) }}</p>
<p>{{ $tc('message.banana', 1) }}</p>
<p>{{ $tc('message.banana', 5) }}</p>

效果如下:

在这里插入图片描述

5、动态改变语言

添加按钮

<button @click="changeLang">切换语言</button>

添加方法

<script>
export default {
  methods: {
    changeLang() {
      if(this.$i18n.locale === 'cn'){   // 判断当前语言
        this.$i18n.locale = 'en'   // 设置当前语言
      } else {
        this.$i18n.locale = 'cn'
      }
    }
  }
}
</script>

6、绑定 data 变量

添加显示和按钮

<p>{{$tc(`message.${fruit}`, 2)}}</p>
<button @click="changeFruit">切换水果</button>

添加 data 变量

data() {
    return {
      fruit:'apple'
    }
  },

添加方法

	changeFruit() {
      if(this.fruit === 'apple'){
        this.fruit = 'banana'
      } else {
        this.fruit = 'apple'
      }
    }

7、整合 ElementUI 语言包

  • 扩展中文
// import cnLocale from 'element-ui/lib/locale/lang/zh-CN'   //引入element语言包
import cnLocale from 'element-plus/lib/locale/lang/zh-cn'
export default {
    message: {
        hello: '你好、世界',
        name: '你好、{name},欢迎来到 {place}',
        apple: '没有苹果 | 一个苹果 | {count}个苹果',
        banana:'没有香蕉 | {n}香蕉 - ¥{n} | {n}香蕉 - ¥{n}'
    },
    ...cnLocale
}
  • 扩展英文
import enLocale from 'element-plus/lib/locale/lang/en'   //引入element语言包
export default {
    message: {
        hello: 'hello world',
        name: 'hello {name}, welcome to {place}',
        apple: 'no apples | one apple | {count} apples',
        banana: 'no bananas | {n} banana - ¥{n} | {n} bananas - ¥{n}'
    },
    ...enLocale
}

  • 使用扩展语言
 <p>{{ $t('el.datepicker.today') }}</p>
 <p>{{ $t('el.transfer.filterPlaceholder') }}</p>

8、v-t 使用

更新使用语言环境信息进行本地化的元素 textContent。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法,则需要将以下参数指定为对象键:

path:必填,语言环境信息的关键字
locale:可选,语言环境
args:可选,用于列表或命名格式

  • 使用
<!-- 字符串语法:字面量 -->
<p v-t="'message.hello'"></p>

<!-- 对象语法: 字面量 -->
<p v-t="{ path: 'message.name', locale: 'en', args: { name: 'kazupon', place: 'Vue2' } }"></p>
  • 绑定 data 变量
//添加 data 变量
data() {
    return {
      fruit: 'apple',
      fruit2: 'message.apple',
      greeting: 'message.name',
      fullName: 'zhangsan'
    }
  }

<!-- 字符串语法:通过数据或计算属性绑定 -->
<p v-t="fruit2"></p>

<!-- 对象语法: 通过数据或计算属性绑定 -->
<p v-t="{ path: greeting, args: { name: fullName, place: 'Vue3' } }"></p>
  • v-t 和 $t()进行比较
    v-t 性能更好,但是使用更复杂
    $t() 更灵活,但是每次重新渲染时都会被执行,影响性能。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-i18n 的使用 的相关文章

随机推荐

  • TCP/IP 网络设备与基础概念

    本文目的在于按照自己的理解 解释清楚网络中的一些基本概念 以及支撑概念落地的网络设备的工作原理 从而解决网络联通性问题 以及为定量分析网络性能问题打基础 如有错漏 欢迎指正 什么是 WAN vs LAN 什么是子网 网关 LAN vs 子网
  • 小白笔记——HTML到Java的Date型转换

    本笔记旨在记录新手学习编程时遇到的问题以及解决方法 主要是作为备忘录来使用 希望路过的大神可以指点一二 同时也希望这个笔记可以帮助到其他有同样困惑的小伙伴 大学毕业之后就再没有用中文写过文章了 所以我写的东西字里行间都会透露出一股子翻译大碴
  • 星星之火-58:CPRI协议缺点,eCPRI协议是如何克服CPRI协议的不足?

    1 CPRI协议不足 CPRI数据传输链路属于空口协议栈 硬件 应用软件共同实现空口协议栈 RFIC gt FPGA RF gt 时域采样 CPRI gt CPRI gt DSP gt L1 软件 gt L2软件 gt L3软件 1 CPR
  • Orcale产生随机数

    1 Oracle中产生uuid的方法 select lower sys guid from dual 2 oracle中函数nvl 如果oracle第一个参数为空那么显示第二个参数的值 如果第一个参数的值不为空 则显示第一个参数本来的值
  • [orin] nvidia orin 上配置tensorrt

    版本 jetpack 5 0 1 tensorrt 8 4 1 5 概述 tensorrt会跟着jetpack的包一起安装 系统本身自带的python是3 8的版本 tensorrt的python包位于这个路径下 cd usr lib py
  • 可视化dockerregistry中的镜像

    1 先来个简单的 docker run d p 5000 5000 name registry srv registry 2 docker run it p 8080 8080 name registry web link registry
  • WebSocket的核心事件

    前言 在上一篇文章中 Spring Boot使用WebSocket模拟聊天 已经简单实现了我们WebSocket的Demo 里面使用的WebSocket事件函数在此做一个总结 WebSocket整体通讯的流程就是 建立链接 gt 发送消息
  • 用定时器0控制切换流水灯顺序,用外部中断控制两种数码管显示方式

    include reg52 h 此文件中定义了单片机的一些特殊功能寄存器 typedef unsigned int u16 对数据类型进行声明定义 typedef unsigned char u8 sbit LSA P2 2 sbit LS
  • 开关电源变换器稳态原理分析(电感伏秒平衡及电容电荷平衡)

    在大量开关周期中 当开关频率固定时 开关占空比D也保持恒定 例如对n个周期 电流波形和电压波形在每个开关周期是重复的 这就意味着电压波形和电流波形变成周期性波形 周期为T 即i n 1 T i nT v n 1 T v nT 这样的状态就称
  • 通过 Debian Packages安装ROS 2(Linux Mint20.2安装ROS2 foxy)

    安装ROS foxy的文章较少 这里记录一下自己安装时遇到的一些坑 1 https raw githubusercontent com访问不了 1 设置语言环境 locale check for UTF 8 sudo apt update
  • openssh升级编译安装,更新Openssh和openssl

    openssh下载 https www openssh com openssl下载 https www openssl org 注 openssh需要配套openssl使用 软件包安装和编译安装的区别 软件包安装 yum provides
  • pycharm中从虚拟环境导包

    一 现有环境 在terminal中输入命令 pip freeze gt requirements txt 下载包到本地 二 把下载好的包放入新环境项目的跟目录下 新环境会提示是否安装 点击 install requirements 点击in
  • LeetCode 18. 四数之和

    文章目录 1 排序 双指针 2 对上面代码加剪枝 题目链接 https leetcode cn problems 4sum 1 排序 双指针 class Solution using ll long long public vector
  • Linux使用4g模块拨号上网

    imux6ull 串口连接移远的4g模块EC200N 使用pppd拨号上网 1 设置内核支持pppd 打开pppd下的所有项 编译内核 Device Drivers gt Network device support gt PPP poin
  • Git出现无法同步问题的解决方式

    在我们使用git同步至github服务器上去时 可能会出现 the request URL returns error 403 Forbbidden while accessing 权限不够 此项目为私有 没有权限 输入用户名和密码 或远程
  • 高级面向对象技术

    封装 三种方式 工厂函数模式 构造函数模式 构造函数模式和原型结合 工厂函数模式代码示例 function factory name var obj new Object obj name name obj sayName function
  • 9_1 ArrayList 初始化 (elementData.getClass() != Object[].class)

    第一个知识点 数组也有自己 class 表示维度 Lxxx表示数组的元素类型 package 集合类 ArrayList类 import java util ArrayList import java util Arrays public
  • 实现高效的并行计算:使用Fork/Join框架和并行流

    要实现高效的并行计算 可以使用Java中的Fork Join框架和并行流 这两个工具都是Java提供的用于并行处理任务的机制 可以充分利用多核处理器的能力 1 Fork Join框架 Fork Join框架是Java中用于并行任务处理的一个
  • 有向图邻接矩阵c语言编程,邻接矩阵有向图(一)之 C语言详解

    本章介绍邻接矩阵有向图 在 图的理论基础 中已经对图进行了理论介绍 这里就不再对图的概念进行重复说明了 和以往一样 本文会先给出C语言的实现 后续再分别给出C 和Java版本的实现 实现的语言虽不同 但是原理如出一辙 选择其中之一进行了解即
  • vue-i18n 的使用

    一 安装 安装 Vue i18n 插件 您可以使用以下命令进行安装 npm install vue i18n next save 安装 npm install vue i18n next save legacy peer deps adde