vue条件渲染的时候会全部渲染然后最后出现条件为true的元素，会闪一下怎么解决？

Question

<div class="header" v-if="isShow">

    <div>

        <img class="avatar" id="avatar" :src="data.avatar" alt="">

    </div>

    <div class="username">{{data.nickname}}</div>

    <div class="create-time" > 

        <span>{{data.media_create_at}}</span>

    </div>

</div>

<div class="mainContent">

    <div class="videoContainer" v-if="!isShow">

       <h1>Sorry About This</h1>

       <p>id not found: {{id}}</p>

    </div> 

    <div class="videoContainer" v-if="isShow">

        <video width="300" :src="data.uri" webkit-playsinline="" controls="controls" vw="1080" vh="608" id="video" autoplay> 

        </video>

    </div>

</div>

其中条件为false的也会闪一下再隐藏掉

Answer 1

export default {&nbsp; &nbsp; data: function() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isShow: false&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp;};