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>