[英]vue.js - Conditional rendering after variable change
一旦布尔值( waiting
)更改为 true,我正在尝试渲染一个新元素。 但是,我已经意识到,一旦我的代码出现一条v-if
语句,我就无法转换到另一条v-if
语句。 由于布尔值在第一个v-if
完成之前不会改变,一旦前者完成,转换到第二个v-if
的最佳方法是什么? 我不能将代码直接添加到那里,因为转换取决于输入。
我考虑过重定向到另一个页面,但我想将我的变量保存在一个地方。
<template>
<transition name="fade">
<div class="home" v-if="!secondplayer">
<div class="inner">
<img class="responsive" src="/static/mask.png" alt="Responsive image" />
<h1>How well do you understand the lyrics in Hamilton?</h1>
<br />
<p>Invite a second player by sending them this link: <u>{{url}}</u>.</p>
</div>
</div>
<div class="play" v-if="secondplayer">
<div v-if="!waiting">
<div class="container hamilton--header--text">
<h1><i>Test your understanding of Hamilton lyrics</i></h1>
<div class="columns hamilton--inner">
<div class="column is-half left">
<p class="title">Player 1</p>
<p class="subtitle">Score: {{playerdata.one.score}}</p>
</div>
<div v-if="secondplayer" class="column is-half right">
<p class="title">Player 2</p>
<p class="subtitle">Score: {{playerdata.two.score}}</p>
</div>
</div>
<div class="hamilton--lyrics--text">
<p>{{question.lyric}}
</p>
<div class="hamilton--answers">
<a v-bind:class="{ 'wronganswer': hasAnswered && !item.correct, 'correctanswer': hasAnswered && item.correct}" @click="checkAnswer(item)" v-for="(item, index) in options">{{item.name}}</a>
</div>
</div>
</div>
</div>
<div v-if="waiting">
<div class="container">
<h1>Waiting for the other player to finish...</h1>
<img src="/static/Spinner.gif">
</div>
</div>
</div>
<div class="gameOver" v-if="winMessage">
<div>
<div class="container">
<h1>{{winMessage}}</h1>
<vue-simple-spinner size="big" message="Loading..."></vue-simple-spinner>
</div>
</div>
</div>
</transition>
</template>
您需要应用过渡 css:
例子:
.fade-enter-active { /* <<transition name>>-<<transition class>> */
transition: all .3s ease;
}
.fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
查看过渡类以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.