Hiding and displaying DIVs on a single HTML page using VueJs 2

Question

Hiding and displaying DIVs on a single HTML page using VueJs 2

I am currently working on building an application that is not a single page application. As I develop my project, I have several div elements on the page that I want to toggle visibility step by step. Below is the snippet of my 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>

In my JavaScript file:

var vm = new Vue({
  el: '#standard_registeration',

  data: {
    section : 'section1',
  },

  computed: {
    sectionIs: function (sectionName) {
      return this.section === sectionName;
    }
  }
});

I would like to confirm if this method is correct, or if there are more efficient ways to achieve the same result? Additionally, how can I incorporate animations in the future?

javascript vue.js vuejs2

Answer 1

Answer №1

In the case of computed properties, they do not accept arguments. Instead, perform the necessary checks in the template itself.

<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 you plan on implementing animations later on, make sure to wrap the code above in a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdad9c9ec9e829e829a">[email protected]</a>/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>

Answer 2

In the case of computed properties, they do not accept arguments. Instead, perform the necessary checks in the template itself.

<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 you plan on implementing animations later on, make sure to wrap the code above in a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdad9c9ec9e829e829a">[email protected]</a>/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>

Hiding and displaying DIVs on a single HTML page using VueJs 2

Answer №1

Similar questions

Issues related to validation prior to submission

The React Stripe API is functioning perfectly on local servers but encountering issues in the live environment

How can I pass the value of a variable from one Vue.js 2 component to another?

All Material UI components are aligned in a single row, spanning the entire width of the page

Ways to ensure that ng-click is triggered exclusively on the click event

Extracting information from Javascript on an HTML webpage

What is the best method to extract and manipulate data from a JSON file in an AngularJS application?

Hello, I'm looking for assistance with this ReactJS code. Is there anyone who can help me

Import existing data from a pre-filled form - VueJS - Bootstrap-Vue

In JavaScript, the JSON Object only stored the final result from a loop

The Vue directive allows for seamless integration of the 'on' and 'class' directives

Guide to accessing a method from a separate file with the help of an event bus

IE does not render the output of multiple AJAX requests

Using jQuery to append a single AJAX response at a time

Show error messages from HTML 5 Validation using a software program

What is the CSS method for altering the color of a slider's runnable track upon selection?

The pure JavaScript function for changing the background color in CSS is not functioning properly

Retrieve the Nth class of an element that has multiple classes without relying on the .attr("class") method in jQuery

Sending a File Object and Data to an MVC 6 Controller in ASP.NET 5 using JavaScript

Navigating with Vue.js using programmatic methods while passing props