VueJs 2 1つのhtmlページでDIVを非表示にして表示

Question

私はアプリケーションを構築していますが、SPAは作成していません。私のページには、私が表示して段階的に隠したいと思っているものがあります。divがあります。ここに私のコードは次のとおりです。

<div v-if="sectionIs('section1')" class="container"> 
</div> 

    <div v-if="sectionIs('section2')" class="container"> 
</div> 

<div v-if="sectionIs('section3')" class="container"> 
</div> 

そして、私のjsファイル内：

var vm = new Vue({ 
    el: '#standard_registeration', 

    data: { 
    section : 'section1', 
    }, 

    computed: { 
    sectionIs: function (sectionName) { 
     return this.section === sectionName 
    } 
    } 
}); 

より良い（短い、クリーナー）アプローチがある場合、私は、私はこの権利をやっているかどうかを知りたい、または？

アニメーションを後で追加したい場合はどうすればよいですか？

Answer 1

計算されたプロパティは引数をとりません。代わりに、テンプレートでテストしてください。

<div v-if="section === 'section1'" class="container"></div> 
<div v-if="section === 'section2'" class="container"></div> 
<div v-if="section === 'section3'" class="container"></div> 

後でアニメーションを追加する場合は、上のすべてをtransitionにラップします。

var vm = new Vue({ 
 
    el: '#standard_registeration', 
 
    data: { 
 
    section: 'section1', 
 
    }, 
 
    mounted(){ 
 
    setInterval(() => { 
 
     let random = Math.floor(Math.random() * (2 - 0 + 1)) + 0; 
 
     this.section = ['section1', 'section2', 'section3'][random] 
 
    }, 2000) 
 
    } 
 
});

.fade-enter-active, .fade-leave-active { 
 
    transition: opacity .5s 
 
} 
 
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 
 
    opacity: 0 
 
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 

 
<div id="standard_registeration"> 
 
    <div v-if="section === 'section1'" class="container"> 
 
     <h1>Section One</h1> 
 
    </div> 
 
    <div v-if="section === 'section2'" class="container"> 
 
     <h1>Section Two</h1> 
 
    </div> 
 
    <div v-if="section === 'section3'" class="container"> 
 
     <h1>Section Three<h1> 
 
    </div> 
 
</div>