Когда дело касается дефолтных значений во Vue.js, есть несколько подходов, в зависимости от контекста и требований проекта. Один из популярных подходов — использование условных операторов внутри шаблона компонента.
Vue.js предоставляет директиву v-if, которая позволяет условно рендерить части шаблона на основе булевого значения. Мы можем использовать эту директиву, чтобы проверить, загрузился ли Vue, и в зависимости от этого отображать нужные значения.
Вот пример кода, который демонстрирует эту концепцию:
<template>
<div>
<p v-if="loaded">{{ message }}</p>
<p v-else>Loading...</p>
</div>
</template>
<script>
export default {
data() {
return {
loaded: false,
message: "Hello, Vue!"
};
},
mounted() {
// Имитация задержки при загрузке
setTimeout(() => {
this.loaded = true;
}, 2000);
}
};
</script>
В этом примере мы создаем компонент с двумя параграфами. Первый параграф отображается, если переменная loaded имеет значение true, и второй параграф отображается, если переменная loaded имеет значение false.
В методе mounted мы имитируем задержку при загрузке, используя функцию setTimeout, и устанавливаем значение переменной loaded на true через 2 секунды. Это позволяет показать сообщение "Hello, Vue!" после того, как Vue полностью загрузится.
Если бы мы не использовали условные операторы внутри шаблона, сообщение "Hello, Vue!" было бы видно пользователям до того, как Vue полностью загрузится и установит значение переменной loaded на true.
Использование условных операторов в шаблонах Vue.js позволяет контролировать, какие части шаблона рендерятся в зависимости от состояния приложения, что является мощным и удобным инструментом в разработке приложений с использованием Vue.js.