Vue3国际化适配(i18n)的简单使用(非常简单)

2023-11-14

Vue-i18n是Vue.js的国际化插件

Vue-i18n官网:Vue I18n | Vue I18n

下载Vue-i18n插件 :

# npm方式
npm install vue-i18n@9

# yarn方式
yarn add vue-i18n@9

在main.js引入Vue-i18n:

# main.js/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    cn: {
        message: {
            hello: '你好,世界'
        }
    }
}

// 使用选项创建i18n实例
const i18n = createI18n({
    locale: 'cn', // 当前语言
    fallbackLocale: 'en', // 回退语言
    messages,
    legacy: false,
    // 如果需要指定其他选项,可以设置其他选项
    // ...
})

createApp(App).use(i18n).mount('#app')

在index.vue中使用:

# index.vue

<template>
  <div class="home">
    <!-- 显示的语言 -->
    <p>{{ $t("message.hello") }}</p>
    <!-- 切换语言的按钮 -->
    <button @click="change">中英语言切换</button>
  </div>
</template>

<script setup>
useI18n()
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
let change = () => {
  if (locale.value == 'cn') {
    locale.value = 'en'
  } else {
    locale.value = 'cn'
  }
}
</script>

效果:切换前\后

 

非常简单!欢迎学习和交流

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3国际化适配(i18n)的简单使用(非常简单) 的相关文章

  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

    我有一个具有以下功能的反应组件 const handleNavigate clientId gt console log clientId navigate dashboard clients clientId console log 显示
  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • React 不响应按键事件

    我正在尝试实现一些非常基本的按键检测 但我根本无法让它工作 我有一个裸露的组件 应该在onKeyDown事件 但控制台中没有任何内容被注销 class App extends React Component constructor prop
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • Office excel将CORS请求作为跨域请求

    我正在尝试从我的 Excel 插件发出跨域请求 正如这里所建议的 http dev office com docs add ins develop addressing same origin policy limitations http
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 如果多个键是相同的 JS,则对对象中的值求和

    例如我有 5 个对象 row aa col 1 value 1 row bb col 2 value 1 row bb col 3 value 1 row aa col 1 value 1 row aa col 2 value 1 我想对值
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • 关于副业怎么发快手引流,教你如何把快手变成自己的副业

    快手上面的赚钱玩法也分很多种 这里蜘蛛火讲几种暴利的玩法 分别是自己拍短视频 免费送 自己直播 和打板引流 自己拍短视频 如果确定是自己拍 首先要定位一个想切入的领域 比如水果电商 很多的农民平时在家乡种的果子都很不错 但是苦于没有办法宣传
  • 数字图像处理之浮雕效果——基于傅里叶变换的频域操作

    问题简述 这是信号与系统课程的一个课后作业 要求运用傅里叶变换的理论知识 在matlab中对数字图像进行浮雕效果的处理 浮雕效果和图像边缘的检测差不多 学习过深度学习的同学可能会想到使用核对图像进行卷积操作 吴恩达老师在DeepLearni
  • Python之字典一个key对应多个value

    python的字典是一个key对应一个value 如果想要一个key对应多个value 那么可以用以下几种方法来实现 方法一 创建key对应列表 name list Mary Jack age list 10 12 stu dict nam
  • C++中 语句 #ifndef …详解

    C 中 语句 ifndef define endif 其作用是防止头文件的重复包含和编译 如果被定义则返回假 如果没有被定义则返回真 需要注意的是 ifndef起到的效果是防止一个源文件两次包含同一个头文件 而不是防止两个源文件包含同一个头
  • spark streaming job监控

    定时检查spark streaming job 运行状态保存到mysql中 1 python3保存数据到mysql vi rlt log job dinc py import pymysql import logging import pa
  • ansys选择一个面上所有节点_利用APDL命令选择椭球面上的节点

    微信公众号 CAE技术分享 问题的背景 笔者在利用Workbench的二次开发功能实现某模型的参数化建模 分网 加载时 由于workbench开发接口的限制 需要结合DM模块 MAPDL模块 Mesh模块 FEM模块以及Mechnical模
  • ELK日志分析系统原理与部署

    文章目录 一 ELK日志分析系统简介 1 1ELK日志分析系统组成 1 2日志处理步骤 二 三款软件各自概念 2 1Elasticsearch介绍 2 2Logstash介绍 2 3Kibana介绍 三 ELK日志分析系统部署 3 1实验环
  • Leetcode刷题之回文链表和交换链表中的结点

    竭力履行你的义务 你应该就会知道 你到底有多大的价值 列夫 托尔斯泰 目录 一 回文链表 1 快慢指针 2 把值存入数组中 然后使用双指针 二 交换链表中的结点 1 快慢指针 一 回文链表 给你一个单链表的头节点 head 请你判断该链表是
  • Spring 框架中都用到了哪些设计模式

    1 工厂模式 BeanFactory就是简单工厂模式的体现 用来创建对象的实例 2 单例模式 Bean默认为单例模式 3 代理模式 Spring的AOP功能用到了JDK的动态代理和CGLIB字节码生成技术 4 模板方法 用来解决代码重复的问
  • Python:Docx文档模板创建使用

    博文作者 wangzirui32 喜欢的可以 点赞 收藏 关注哦 本文首发于CSDN 未经许可禁止转载 Hello 大家好 我是wangzirui32 今天我们来学习Docx文档模板创建与使用 开始学习吧 1 Docxtpl Docxtpl
  • 服务器加cpu显示broadwell,英特尔新的Broadwell Xeon服务器CPU每个插槽可提供多达22个内核...

    英特尔的主流消费类处理器主要是双核和四核处理器 但是服务器CPU的性能要高得多 恰当的例子 基于Broadwell的新型Xeon E5 2600 v4系列中最昂贵的成员具有高达22个内核 运行频率为2 2GHz 而所有这些内核都只能装在一个
  • java中html网页转化成pdf(itext)

    Java 实现 HTML 页面转 PDF 解决方案 一 添加 maven 依赖
  • Centos for arm64 aarch64 下载地址列表以及鲲鹏服务器安装教程

    鲲鹏服务器安装Centos 7 6教程 镜像下载地址 一 BIOS 配置 二 通过BMC界面的虚拟光驱安装 1 虚拟光驱挂载系统ISO镜像 2 设置启动项为光驱启动 3 重启服务器 三 下载驱动软件包和驱动配套表 1 驱动下载 2 驱动安装
  • LeetCode 523. Continuous Subarray Sum 解题报告

    LeetCode 523 Continuous Subarray Sum 解题报告 题目描述 Given a list of non negative numbers and a target integer k write a funct
  • Oracle重命名sys或system操作记录

    oracle等保中有条要求 应重命名或删除默认账户 修改默认账户的默认口令 给的建议是修改sys system默认账户名称 避免使用常见用户名称 以下记录了两种方法来实现上面的要求 Oracle重命名sys操作记录 方法一 通过用户的信息是
  • android 手机获取是否开启了底部导航栏兼容小米、华为

    TargetApi Build VERSION CODES JELLY BEAN MR1 public static boolean isNavigationBarShow WindowManager windowManager Displ
  • Qt5.9调用Windows的匿名管道总结

    匿名管道一般用于两个父子进程之间的通信 通常是在MFC上调用 在Windows上 匿名管道的调用函数为CreatePipe 具体的原理讲解和调用实例 可以参考博主的这篇博客 https blog csdn net naibozhuan374
  • Python爬虫学了几个月却不敢接单?过来人的经验总结收好!

    前几天有刷到一个提问 爬虫学了几个月了却还是不敢上手去接单 爬虫接单靠不靠谱 有些新手心里会犯嘀咕 怕不小心就踩了红线 作为过来人也接过不少单 来浅聊一下我的经验 这篇所说的经验总结可能更适合爬虫新手 爬虫大佬可以忽略 此篇小结 Pytho
  • git拉取项目、提交代码简单教程

    最近要用HBuilderX做一个uniapp项目 再写一篇git拉项目代码 交代码的文章 虽然和上一篇差不多啦 不过就是上一篇的交代码没有用指令 这一篇就用一下 首先是要装好git和node 可以自行查找教程 应该没什么坑 第一步 新建一个
  • Vue3国际化适配(i18n)的简单使用(非常简单)

    Vue i18n是Vue js的国际化插件 Vue i18n官网 Vue I18n Vue I18n 下载Vue i18n插件 npm方式 npm install vue i18n 9 yarn方式 yarn add vue i18n 9