Vue3 v-else Directive
Vue3 Built-in Directivesv-elseThe directive is used to represent the else block of v-if or v-else-if.
Basic Description
v-elseThe 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 expressions)
- Effect: Represents the else block of v-if, and 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>
<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>
Other Extensions