如何在 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>