1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）

1
2
import VueI18n from'vue-i18n'
Vue.use(VueI18n)

2、准备本地的翻译信息

1
2
3
4
5
6
7
8
9
10
11
12
const messages = {
 zh: {
  message: {
  hello:'好好学习，天天向上！'
  }
 },
 en: {
  message: {
  hello:'good good study, day day up!'
  }
 }
}

3、创建带有选项的 VueI18n 实例

1
2
3
4
const i18n =new VueI18n({
 locale:'en',// 语言标识
 messages
})

4、把 i18n 挂载到 vue 根实例上

1
2
3
4
5
const app =new Vue({
 router,
 i18n,
 ...App
}).$mount('#app')
5、html写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="src/main.js"></script>
</head>
<body>
<div id="app">
<h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>
</body>
</html>
上述加粗地方如何显示

vue中html页面写入$t(‘’)怎么显示的更多相关文章

  1. vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  2. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  3. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  4. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  5. vue中嵌套页面（iframe）

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

  6. js微信禁用右上角的分享按钮，和vue中微信页面禁用右上角的分享按钮的问题

    1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个 ...

  7. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  8. vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  9. vue中记录页面的滚动距离

    业务需求:pageOne页面是一个商品列表页面,在这个页面点击商品,就会跳转到pageTwo商品详细页面.此时再从pageTwo页面返回到pageOne页面时,pageOne页面需要做到:1.记录pa ...

随机推荐

  1. PhysicalBasedRendering(一)物理篇

    很多人对PBR的理解是存在偏差的,跳不出传统渲染模型的思维圈子,把它理解成一种模拟效果更为精确的算法公式,虽然在某种程度上是对的,但没有看到PBR的本质. PBR是对光在真实世界中与环境交互的一种近似 ...

  2. centos 下安装mulval工具

    我这里采用的是centos 6.5版本系统 MulVAL是企业网络安全分析的工具.它使用漏洞扫描程序(OVAL / Nessus)作为攻击路径生成的数源,其中包括扫描结果和网络可访问性信息. 在这之前 ...

  3. [问题解决]eclipse.ini 文件配置jdk版本

    想要多个JDK 和 多个eclipse在一台电脑上同时运行无需配置环境变量,只需修改eclipse.ini文件即可启动eclipse. -vm D:\javaSE1.\jdk1.\bin\javaw. ...

  4. C# 反射获取属性类型及属性值，两个实体转换

    一.两个实体数据转换 /// <summary> /// 为属性赋值 /// </summary> /// <typeparam name="T"&g ...

  5. 【Python】itchat

    错误:http://bbs.51cto.com/thread-1501477-1.html 解决方法降低certifi版本 >>> import itchat >>> ...

  6. 正式表达式判断私有 IP 地址

    正式表达式判断私有 IP 地址   ^1(((0|27)(.(([1-9]?|1[0-9])[0-9]|2([0-4][0-9]|5[0-5])))|(72.(1[6-9]|2[0-9]|3[01]) ...

  7. redis-大key寻找

    使用redis-rdb-tools 项目地址 https://github.com/sripathikrishnan/redis-rdb-tools 生成csv命令 rdb -c memory //d ...

  8. 深入理解Java虚拟机读书笔记2----垃圾收集器与内存分配策略

    二 垃圾收集器与内存分配策略 1 JVM中哪些内存需要回收?     JVM垃圾回收主要关注的是Java堆和方法区这两个区域:而程序计数器.虚拟机栈.本地方法栈这3个区域随线程而生,随线程而灭,随着方 ...

  9. jmeter安装和使用-个人总结

    幼儿园版本服务器接口地址:http://10.50.10.78:8666/document/api/#api-account-login 一,安装 1.将jmeter下载后,解压目录放到本地非中文文件 ...

  10. 无分类编址（CIDR，Class Inter-Domain-Routing）

    CIDR全称是无分类域间路由选择,英文全称是Classless Inter-Domain Routing,大家多称之为无分类编址 CIDR的特点 (1)CIDR消除了传统的A类.B类和C类地址以及划分 ...