vue locales
时间: 2023-10-14 10:30:20 浏览: 125
Vue.js 支持国际化,可以通过 locales 对象来定义不同语言的翻译文本。
举个例子,假设我们要支持英语和法语两种语言,可以这样定义 locales 对象:
```javascript
const locales = {
en: {
message: {
hello: 'Hello',
goodbye: 'Goodbye'
}
},
fr: {
message: {
hello: 'Bonjour',
goodbye: 'Au revoir'
}
}
};
```
然后在 Vue 实例中,可以通过 $t 方法来获取翻译后的文本:
```javascript
const app = new Vue({
el: '#app',
data: {
currentLocale: 'en'
},
methods: {
switchLocale() {
this.currentLocale = (this.currentLocale === 'en') ? 'fr' : 'en';
}
},
computed: {
messages() {
return locales[this.currentLocale].message;
}
}
});
```
在模板中使用 $t 方法:
```html
<div id="app">
<p>{{ $t('message.hello') }}</p>
<p>{{ $t('message.goodbye') }}</p>
<button @click="switchLocale">Switch language</button>
</div>
```
这样在不同语言下,页面中的文本会自动切换。