Что такое VueJS? Каковы основные особенности VueJS? 6

207.Какие бывают типы форматирования?

В основном в плагине i18n доступно 4 типа форматирования,

Именованное форматирование: сначала вам нужно определить ключи сообщений в фигурных скобках ({})

const messages = {
en: {
message: {
greeting: '{msg} Morning'
}
}
}
После этого передайте значение аргумента вместе с ключом в шаблоне

{{ $t('message.greeting', { msg: 'Good' }) }}

Он выводит результат, как показано ниже,
Good morning
Примечание: он также принимает объект, подобный массиву

{{ $t('message.greeting', {'0': 'Good'}) }}

Форматирование HTML: это форматирование требуется, если вы хотите отобразить перевод как сообщение HTML, а не как статическую строку.
const messages = {
en: {
message: {
greeting: 'Good
Morning'
}
}
}
После этого используйте его в шаблоне директивы html, как показано ниже.

v-html = "$t ('message.greeting')" >

Наконец, он выводит результат, как показано ниже

Good
существует, но отображается как html, а не как строка-->
Morning

Формат Ruby on rails: сначала вам нужно определить процентиль и фигурные скобки, как показано ниже,

const messages = {
ru: {
message: {
greeting': "% {msg} Morning",
},
},
};

После этого передайте аргумент с ключом, аналогичным именованному форматированию

{{ $t('message.greeting', { msg: 'Good' }) }}

Наконец, он отображает результат, как показано ниже,

Good Morning

208.Что такое пользовательское форматирование?

Вы можете использовать настраиваемое форматирование для некоторых случаев форматирования, таких как синтаксис форматирования ICU (строки «шаблона» сообщения с заполнителями переменных элементов, заключенными в {фигурные скобки}). Он реализует интерфейс форматирования.
// Реализация пользовательского форматирования
class CustomFormatter {
constructor(options) {
// ...
}
interpolate(message, values) {
//вернуть интерполированный массив
return ["resolved message string"];
}
}

//зарегистрироваться с опцией `formatter`

const i18n = new VueI18n({
locale: "en-US",
formatter: new CustomFormatter(/* here the constructor options */),
messages: {
"en-US": {
// ...
},
// ...
},
});

//Запуск!

new Vue({ i18n }).$mount("#app");