一、什麼是雙向綁定 我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定舉個慄子 當用戶填寫表 ...
1、下載 依賴
npm install vue-i18n@nex
2、在src目錄下創建文件夾 創建文件 index.ts 、 zh/index.ts 、en/index.ts
// index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh/index'
import en from './en/index'
const messages = {
en,
zh,
}
console.log('localStorage.getItem', localStorage.getItem('language'));
const language = (navigator.language || 'en').toLocaleLowerCase() // 獲取瀏覽器的語言
console.log('language.split', language.split('-')[0]);
const i18n = new createI18n({
locale: localStorage.getItem('language') || language.split('-')[0] || 'en', // 先從緩存里拿，沒有的話就用瀏覽器語言，
fallbackLocale: 'zh', // 設置備用語言
messages,
legacy: false,
globalInjection:true,
})
export default i18n
3、 en/index.ts
// en/index.ts export default { 'result.success.title': 'Submission Success', 'result.success.description': 'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.', 'result.success.operate-title': 'Project Name', 'result.success.operate-id': 'Project ID', 'result.success.principal': 'Principal', 'result.success.operate-time': 'Effective time', 'result.success.step1-title': 'Create project', 'result.success.step1-operator': 'Qu Lili', 'result.success.step2-title': 'Departmental preliminary review', 'result.success.step2-operator': 'Zhou Maomao', 'result.success.step2-extra': 'Urge', 'result.success.step3-title': 'Financial review', 'result.success.step4-title': 'Finish', 'result.success.btn-return': 'Back List', 'result.success.btn-project': 'View Project', 'result.success.btn-print': 'Print' }
4、 zh/index.ts
// zn/index.ts
export default { 'result.success.title': '提交成功', 'result.success.description': '提交結果頁用於反饋一系列操作任務的處理結果， 如果僅是簡單操作，使用 Message 全局提示反饋即可。 本文字區域可以展示簡單的補充說明，如果有類似展示 “單據”的需求，下麵這個灰色區域可以呈現比較複雜的內容。', 'result.success.operate-title': '項目名稱', 'result.success.operate-id': '項目 ID', 'result.success.principal': '負責人', 'result.success.operate-time': '生效時間', 'result.success.step1-title': '創建項目', 'result.success.step1-operator': '曲麗麗', 'result.success.step2-title': '部門初審', 'result.success.step2-operator': '周毛毛', 'result.success.step2-extra': '催一下', 'result.success.step3-title': '財務覆核', 'result.success.step4-title': '完成', 'result.success.btn-return': '返回列表', 'result.success.btn-project': '查看項目', 'result.success.btn-print': '列印' }
5、main.ts
// main.ts import i18n from './i18n/index'; function vawBoot() { const app = createApp(App) app.use(i18n) app.mount('#app') }
6、使用
// 使用方式 index.vue <template>
<div>
<n-select
size="small"
style="width: 120px;"
v-model:value="optionsValue"
:options="options"
@update:value="handleUpdateValue"/>
<div>
{{ $t('result.success.title') }}
</div>
</div>
</template> <script setup lang="ts"> import { useI18n } from 'vue-i18n' const { t } = useI18n() // 國際化
const langOptions = ref([
{label: "English", value: 'en'},
{label: "中文", value: 'zn'},
])
const optionsValue = ref(localStorage.getItem('language'))
function handleUpdateValue(lang) {
console.log(lang)
localStorage.setItem("language", lang);
window.location.reload();
}
</script>
