本文展示了如何使用Vue和VueI18n库在网页中实现语言切换功能，提供了英文和中文的示例内容。
效果展示：
完整代码（全部复制，保存html，亲测可用，需提前准备好翻译的内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Switch with Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/vue-i18n@8"></script>
</head>
<body>
<div id="app">
<h1>{{ $t('title') }}</h1>
<p>{{ $t('content') }}</p>
<button @click="switchLanguage">Switch Language</button>
</div>
<script>
const messages = {
en: {
title: 'Website title!',
content: 'Website content...',
},
zh: {
title: '网站标题!',
content: '网站相关内容。。。'
}
};
const i18n = new VueI18n({
locale: 'en', // 默认语言
messages
});
new Vue({
el: '#app',
i18n,
methods: {
switchLanguage() {
const currentLang = this.$i18n.locale;
const newLang = currentLang === 'en' ? 'zh' : 'en'; // 切换到英文或中文
this.$i18n.locale = newLang;
}
}
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
