如何在Vuejs中有条件地渲染屏幕?

Question

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-if="isHidden && !isFadeout">
//some code for screen 2

<button v-on:click="isFadeout = true"> Hi</button>
</div>

<div  v-if="isFadeout && isHidden">
//some code for screen 3

<button v-on:click="isHidden = true"> HELLO</button>
</div>

<div  v-if="isWelcome && isHidden">
//some code for screen 4

<button v-on:click="isHidden = true"> Fine</button>
</div>

如何有条件地呈现屏幕直到三个屏幕，它的渲染成功，但卡在第三个屏幕的按钮，它没有重定向到第四个屏幕

Answer 1

尝试使用这个并尝试为第四个屏幕按钮添加所需的代码

<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">
//some code for screen 3

<button v-on:click="isWelcome = true"> HELLO</button>
</div>

<div  v-else-if="isWelcome">
//some code for screen 4

<button>Fine</button>
</div>

Answer 2

它应该为你工作

<div  v-if="!isHidden">
//some code for screen1

<button v-on:click="isHidden = true"> HELLO</button>
</div>

<div  v-if="isHidden && !isFadeout">
//some code for screen 2

<button v-on:click="isFadeout = true"> Hi</button>
</div>

<div  v-if="isFadeout && isHidden">
//some code for screen 3

<button v-on:click="isWelcome = true"> HELLO</button>
</div>

<div  v-if="isWelcome && isHidden">
//some code for screen 4

<button v-on:click="isHidden = true"> Fine</button>
</div>