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>

VueJs 2在一个html页面中隐藏和显示DIV

1 个答案: