来自 软件资讯 2019-11-08 03:31 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

Vue国际化的行使,切换中塞尔维亚语效果

图片 1图片 2

2、准备本地的翻译音信

图片 3图片 4

const i18n = new VueI18n({
 locale: 'zh', // 语言标识
 messages
})

 第二种采纳方法,是在剧本里面使用,这时能够动用 this.$t('xxxx')的议程。如下

const messages = {
 zh: {
  message: {
  hello: '好好学习,天天向上!'
  }
 },
 en: {
  message: {
  hello: 'good good study, day day up!'
  }
 }
}

华语页面效果如下:

const i18n = new VueI18n({
 locale: getCookie('PLAY_LANG','zh'), // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

main.js

那边供给注意四个极易出错的地点:

main.js

接下去,在HTML 模板中使用,要非常注目的在于 js 中的国际化写法

页面呈现的职能就是:

(2卡塔尔国、json 中在同多少个指标里有同名属性

图片 5

图片 6

此处把月份放到下拉框里面体现为例:

1、在 main.js 中引进 vue-i18n (前提是要先引进 vue卡塔尔

首先是是在main.js文件中把国际化引进进来

图片 7

图片 8

// HTML
<div id="app">
 <div style="margin: 20px;">
  <h1>{{$t("message.title")}}</h1>
  <input style="width: 300px;" class="form-control" :placeholder="$t('placeholder.enter')">
  <ul>
  <li v-for="brand in brands">{{brand}}</li>
  </ul>
 </div>
</div>
// JS
data () {
 return {
  brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]
 }
 },

德文页面效果如下:

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

然后大家打算贰个constant.js文件。在其间如下配置:

如上所述是小编给大家介绍的行使 vue-i18n 切换中丹麦语效果,希望对我们有所支持,假若大家有此外疑问请给本身留言,笔者会及时回复大家的。在这里也极度感激我们对台本之家网址的支撑!

 

安装格局:(此处只演示 npm卡塔 尔(阿拉伯语:قطر‎

constants.js

const app = new Vue({
 router,
 i18n,
 ...App
}).$mount('#app')

此地注意的是,小编那边的月度,直接运用的正是大家国际化里面配备的月度的key值。接下来大家就来页面上利用了。

function getCookie(name,defaultValue) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
 return unescape(arr[2]);
 else
 return defaultValue;
}
export {
 getCookie
}
 1 const i18n = new VueI18n({
 2   locale: 'zh-CN',
 3   messages: {
 4     'zh-CN': {
 5       'detail1': '详情1',
 6       'detail2': '详情2',
 7       'detail3': '详情3',
 8       'year': '年',
 9       'month1': '1月',
10       'month2': '2月',
11       'month3': '3月'
12     },
13     'en-US': {
14       'detail1': 'Detail1',
15       'detail2': 'Detail2',
16       'detail3': 'Detail3',
17       'year': 'year',
18       'month1': 'January',
19       'month2': 'February',
20       'month3': 'March'
21     }
22   }
23 })

(1)、将 $t() 写成了 $()

图片 9

我们刚刚选定的言语标志是 “en” 西班牙语,现在改成 “zh” 普通话,并查看效果

test.vue

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

 1 <template>
 2   <div>
 3       <h1>{{$t('detail1')}}</h1>
 4       <el-button @click="print">打印</el-button>
 5   </div>
 6 </template>
 7 <script>
 8   export default{
 9    methods:{
10        print(){
11            console.log(this.$t('detail1'))
12        }
13    },
14   }
15 </script>
16 
17 <style>
18 
19 </style>
const i18n = new VueI18n({
 locale: 'en', // 语言标识
 messages: {
  'zh': require('./common/lang/zh'),
  'en': require('./common/lang/en')
 }
})

到此,两种艺术介绍达成。因为在支付中相见这么的题目,故顺便总计下分享出来。如若大家有其余雷同的主题材料或措施得以留言分享^_^。

npm install vue-i18n
 1 <template>
 2   <div>
 3       <h1>{{$t('detail1')}}</h1>
 4       <el-button @click="print">打印</el-button>
 5      <el-select v-model="month" placeholder="请选择月份">
 6         <el-option v-for="item in months" :key="item.value" :label="$t(item.label)" :value="item.value">
 7         </el-option>
 8       </el-select>
 9   </div>
10 </template>
11 <script>
12 import {months} from '@/util/constants'
13   export default{
14     data(){
15         return{
16             month:'',
17             months:[]
18         }
19       },
20     methods:{
21        print(){
22            console.log(this.$t('detail1'))
23        }
24    },
25    created(){
26        this.months = months
27    }
28   }
29 </script>
30 
31 <style>
32 
33 </style>

1、新建四个 cookie.js 文件,用于读取cookie

接下去便是在页面中运用的标题了。

下边包车型大巴案例借用了 Element UI 的弹窗样式,上边的步骤不再赘言,间接上基本代码

先是大家前不久main.js文件中的国际化里面扩大月份的国际化布局:

翻看编写翻译效果:

第风姿罗曼蒂克种选用方法:在视图模板中平素利用,选择{{$t('xxxx')}}的方法。如下我今后使用'detail1'那几个的国际化:

<div id="app">
 <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
 </div>

意大利语效果:

支撑 Vue.js 2.x 以上版本

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:Vue国际化的行使,切换中塞尔维亚语效果

关键词: