VueJs 2在一個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>