javascript - 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>