export default {
name: "HelloWworld",
data: function () {
return {
isHidden: false,
isWelcome: false,
isFadeout: false,
}
}
<div v-if="!isHidden">
//some code for screen1
<button v-on:click="isHidden = true"> HELLO</button>
</div>
<div v-else-if="isHidden && !isFadeout">
//some code for screen 2
<button v-on:click="isFadeout = true"> Hi</button>
</div>
<div v-else-if="isFadeout && isHidden && !isWelcome">
<input
:type="passwordFieldType"
v-model="user.password"
id="password"
name="password"
class="input-section-three"
:class="{ 'is-invalid': submitted && $v.user.password.$error }"
placeholder="Enter new password"
:maxlength="maxpassword"
v-on:keypress="isPassword($event)"
/>
<div
v-if="submitted && $v.user.password.$error"
class="invalid-feedback-two"
>
<span v-if="!$v.user.password.required">Password is required</span> …Run Code Online (Sandbox Code Playgroud)