YouTipOnline Tutorial -- Learn not only technology, but also dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
Vue3 Tutorial
Vue3 TutorialVue3 IntroductionVue3 InstallationVSCode VueVue3 BuildVue3 Create ProjectVue3 Project IntroductionVite TutorialVue3 Directory StructureVue3 Getting StartedVue3 Basic SyntaxVue3 Declarative RenderingVue3 DirectivesVue3 Template SyntaxVue3 Conditional StatementsVue3 Loop StatementsVue3 ComponentsVue3 Computed PropertiesVue3 Watch PropertiesVue3 Style BindingVue3 Event HandlingVue3 FormsVue3 Custom DirectivesVue3 RoutingVue3 MixinsVue3 Ajax(axios)Vue3 Composition APIVue3 Single File ComponentsVue3 Pinia
Reference Manual
Vue3 Built-in AttributesVue3 Built-in ComponentsVue Component InstanceVue3 Built-in DirectivesVue Instance OptionsVue3 Lifecycle HooksVue3 Tailwind CSSVue3 Global APIVue3 Options APIVue3 Quiz
Practical Case 1
Vue3 Task Management SystemEnvironment SetupCore Business DevelopmentComponent SplittingState Management and Data PersistenceRouting SystemLogic Reuse and Performance OptimizationProject Deployment
Practical Case 2
Vue3 Blog ProjectTemplate Syntax RenderingReactive DataComponent SplittingRouting NavigationLifecycle and Data Requestswatch and Search FunctionComposable — Encapsulating Reusable LogicPinia — Global State ManagementBuild and Deploy — Deploy to Vercel
Vue3 v-else Directive
Vue3 Built-in DirectivesThe v-else directive is used to indicate the else block for v-if or v-else-if.
Basic Description
The v-else directive must immediately follow a v-if or v-else-if element, indicating the content to render when all preceding conditions are not met.
- Expected Type: None (does not accept expression)
- Function: Represents the else block of v-if, must be preceded by v-if or v-else-if.
Basic Usage
Example
<template>
<div>
<p v-if="isLoggedIn">Welcome back</p>
<p v-else>Please log in</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: false }
}
}
</script>