How to use v-show and v-if in Vue to achieve dynamic page rendering

Vue is a popular JavaScript framework for building dynamic web applications. v-show and v-if are both instructions in Vue for dynamically rendering views. They can help us have better control over the page when DOM elements are not shown or hidden. This article will explain in detail how to use v-show and v-if instructions in Vue to achieve dynamic page rendering.

The v-show directive in Vue

v-show is a directive in Vue that dynamically displays or hides elements based on the value of an expression. With v-show, the element is always rendered in the DOM and only CSS is used to control showing or hiding.

The v-show directive can be used in the following ways:

<template>
  <div>
    <h1 v-show="showTitle">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

In the above code, we have created a button to toggle the display of the title. We bind to the showTitle variable and the title will only be displayed if its value is true. Clicking the button switches the showTitle value in the toggleTitle method to false and re-renders the DOM. In this case, the title will disappear from the browser.

The v-if directive in Vue

The v-if directive is used to render DOM elements only when the specified condition is true. Unlike v-show, v-if dynamically adds/removes DOM elements.

The v-if directive can be used in the following ways:

<template>
  <div>
    <h2 v-if="isLoggedIn">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

In the above code, we use the v-if directive to check whether you are logged in or not. If already logged in, we render the welcome message in the DOM, otherwise we hide it. The login and logout methods are called when we click on the login or logout button and these methods will update the data and DOM.

The combination of v-show and v-if in Vue

In many cases, we need to dynamically render a certain area and show/hide different content according to different situations. v-show and v-if can be combined to achieve this kind of dynamic rendering.

<template>
  <div>
    <div v-if="isActivated">
      <h3>Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3>Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

In the above example, we use the v-if directive to check whether it is activated and render different views. If isActivated is true, we render the welcome message into the DOM; otherwise, we display the message to authenticate the user. We use the v-show directive to achieve dynamic display of some content.

With components with buttons, we can use toggleActivation to switch the isActivated value, thereby changing the rendering of the DOM view. By using v-show and v-if together, we can have better control over the page and make it more dynamic and flexible.

Summary

v-show and v-if are two useful instructions in Vue, used to control the display and hiding of DOM elements. v-show is used to simply control the showing/hiding of CSS, while v-if dynamically adds/removes DOM elements. Using these two directives together gives you better control over the dynamic rendering of the DOM. When implementing Vue dynamic page rendering, we should decide to use v-show or v-if and their combination according to the situation.

The above is the detailed content of How to use v-show and v-if in Vue to achieve dynamic page rendering. For more information, please follow other related articles on the PHP Chinese website!