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. New Journey--工作五年所思所感小记

    正式参加工作满五年了,2013年7月9日走入游戏行业.之前就计划着应该提笔写点什么留下来,但当日子真的到了,竟是不知说些什么了.14年年中的时候我曾写过一篇工作一年的总结,现在回头读起来,还真是别有一 ...

  2. IDE 热部署配置

    从eclipse切换到IDE,遇到应用不能热部署问题,解决如下 1.tomcat 中server配置下面三点需要注意 2.tomcat的deployment 中 需要选择war exploded而不是 ...

  3. 彻底搞懂Scrapy的中间件（一）

    中间件是Scrapy里面的一个核心概念.使用中间件可以在爬虫的请求发起之前或者请求返回之后对数据进行定制化修改,从而开发出适应不同情况的爬虫. "中间件"这个中文名字和前面章节讲到 ...

  4. jtable时间编辑器

    最近在做一个项目,很烦,用的swing,但是不管怎样也还是啃下来了,但是碰到一个问题,要在jtable里编辑时用一个时间选择器,因为走了许多弯路,找到挺多jar包,耗时较久,所以记录一下,便于以后查阅 ...

  5. java面试题复习（五）

    41.阐述final.finally.finalize的区别 final:修饰符(关键字)有三种用法:如果一个类被声明为final,意味着它不能再派生出新的子类,即不能被继承,因此它和abstract ...

  6. 我与OO （1）

    前言 “真正的勇士敢于面对惨淡的人生,敢于面对淋漓的鲜血” 我是谨慎拜读了鲁迅先生的名言,怀着崇敬的精神去接触这门课程的. 而当我真的经历了这门课程以后,我才发现,刘和珍君这样的觉悟,我们普通人,果然 ...

  7. pyqt5-数据库加载错误解决

    1.无法连接postgresql 直接在pycharm上安装pyqt5没有QT这个文件夹, 在ancanda中装好使用. 切换加载环境,或者将第二个ptqt5拷贝替换第一个环境中的pyqt5

  8. 今日、本周、本月时间列表 python方法

    def get_time(self): ''' @author : Cong @Email : 624420781@qq.com @描 述 : 生产时间列表 ''' # 生成本日时间列表 i = da ...

  9. Python序列化操作与反序列操作

    一.概念 序列化:转向一个字符串数据类型序列:字符串 二.需要做序列化操作的情况1.数据存储2.网络上数据传输 从数据类型到字符串的过程叫序列化从字符串到数据类型的过程叫反序列化 三.现有序列化模块1 ...

  10. 容器——list（双向链表）

    做了一道list可以解决的题,才发现list多么的好 转自https://www.cnblogs.com/BeyondAnyTime/archive/2012/08/10/2631191.html 1 ...