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. WordPress版微信小程序3.0版发布

    距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不 ...

  2. Layout-3相关代码:3列布局代码演化三]

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JavaScript数组方法--includes、indexOf、lastIndexOf

    我们继续吧! includes:includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false.还是先看看includes的用法吧 var ar ...

  4. SQL server 2008(Linux安装)

    今天应公司的要求,需要在阿里云上安装sql server 在本地使用,由于自己原来没有涉及过这样的安装所以走了很多的弯路.现在将我的安装过程与大家分享,希望能够帮到想要学习这个方面的人.以下是我用Ce ...

  5. java 中的interface是否继承object

    首先我们从C++说起, c++可以多继承.也就是一个类型 --- class,可以继承自2个以上的父类型.多继承导致一个问题,很多人知道.例如,如果类型B,类型C均继承自类型A.然后类型D继承自类型B ...

  6. vue 单独页面body css 样式设置

    给某个page下template中的第一个div设置如下样式: .body-bg { position: absolute; width: 100%; height: 100%; top:; left ...

  7. Django建站+Vuejs前端

    第一节 @注意 千万注意格式.标签名字: 浏览器开发者模式修改页面不显示:在开发者模式下(F12进入),打开设置页面(F1),勾选 Disable cache (while DevTools is o ...

  8. Vue初接触 stage1

    开始学Vue辣!哈哈哈哈哈真的好好玩啊Vue!这个写法我真的太爱了! stage1 4-27 先写一下安装Vue devtools时遇到的问题(说来神奇,我是写第一个实例的时候试着在控制台打印了这个空 ...

  9. SpringMVC参数注解解释

    在Controller的开发中,经常会用到很多注解,下面解释一下关于形参常用注解的一些解释,他们主要是用来接收参数的. @ModelAttribute("vo", ObjectVo ...

  10. 201772020113李清华《面向对象程序设计（java）》第十二周学习总结

    1.实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: (2) 掌握Java GUI中2D图形绘制常用类的API: (3) 了解Java GUI中2D图形中字体与颜色的 ...