javascript - VueJs 2 hide and show DIVs in one html page -

i'm building application not spa. there div's in page want show , hide step step. here code:

 <div v-if="sectionis('section1')" class="container">  </div>    <div v-if="sectionis('section2')" class="container">  </div>   <div v-if="sectionis('section3')" class="container">  </div> 

and in js file :

var vm = new vue({   el: '#standard_registeration',    data: {     section : 'section1',   },    computed: {     sectionis: function (sectionname) {       return this.section === sectionname     }   } }); 

i want know if i'm doing right, or if there better (shorter, cleaner) approach?

what if want add animation later?

computed properties not take arguments. instead, test in template.

<div v-if="section === 'section1'" class="container"></div> <div v-if="section === 'section2'" class="container"></div> <div v-if="section === 'section3'" class="container"></div> 

if want add animation later, wrap of above in 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>