VueJs 2在一个html页面中隐藏和显示DIV
问题描述:
我正在构建应用程序,但不是SPA。我的网页上有一些div
,我想一步一步展示和隐藏。这里是我的代码:VueJs 2在一个html页面中隐藏和显示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
}
}
});
我想知道如果我这样做的权利,或者,如果有一个更好的(更短,更清洁)的方法吗?
如果我想稍后添加动画,该怎么办?
答
计算属性不带参数。相反,只需在模板中进行测试。
<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/[email protected]/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>