I tried to explain how to use Vue's v-if so that beginners can understand.

⇨ Click here for the Vue article index

v-if makes it super easy to switch between display and non-display

v-if simply toggles between true and false, allowing you to show or hide elements.

How to display

<div v-if="true">Display this</div>

It will be displayed if true.

How to hide

<div v-if="false">Do not display this</div>

That's basically it.

The following discussion is about what happens when you actually implement it.

When you want to switch between display and non-display

First, as mentioned earlier, represent true and false with variables.

<template>
  <div v-if="isView">Display this</div>
</template>

<script>
  export default {
    data() {
      return {
        isView: true,
      }
    },
  }
</script>

This displays as true using the variable "isView".

Now, let's try setting it to false.

<script>
  export default {
    data() {
      return {
        isView: false,
      }
    },
  }
</script>

It has become non-displayed.

In other words, by changing this variable, you can show or hide elements.

Write a function to toggle between true and false

<script>
  export default {
    data() {
      return {
        isView: false,
      }
    },
    methods: {
      showView() {
        this.isView = true
      },
    },
  }
</script>

We created a function called showView() that changes isView to true.

Also, isView is initially false, so it is in a hidden state.

Place a button to trigger the showView() function

<template
  ><div>
    <div v-if="isView">Display this</div>
    <button @click="showView">Button</button>
  </div>
</template>

@click allows you to attach a click event.

It is the same as "v-on:click".

Try clicking the button. If "Display this" is displayed, it's okay.

Switching between display and non-display

In other words, when you press a button, you implement it to switch between true and false.

If you have reached this point, it is simple, you just change the function.

    methods: {
      toggleIsView() {
        this.isView = !this.isView; // Change true to false, and false to true.
      }
    }

Final form

<template
  ><div>
    <div v-if="isView">Display this</div>
    <button @click="toggleIsView">Button</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isView: false,
      }
    },
    methods: {
      toggleIsView() {
        this.isView = !this.isView
      },
    },
  }
</script>

Now, when you press the button, it will be displayed or hidden.

Difference from v-show

The difference from v-show is that v-if is rendered when it becomes true.

v-show simply hides it, while v-if, when validated ⇨elements, confirms that the tag itself does not exist.

In other words, it is rendered based on conditions.

Unless there is a specific reason, I think it's best to use v-if.

Writing conditions in a different pattern

In the initial pattern, we switched between display and non-display by changing true and false, but there are other ways to write conditions.

<div v-if="number === 1">Display when it's 1</div>

You can write it similar to an if statement.

<div v-if="text === 'Text'">Display when it's "Text"</div>

You can directly write an if statement. In some cases, you can also write mathematical expressions.

<div v-if="num * 2 > 10">Display when "num*2" is greater than 10</div>

Summary

That's it.

I hope it can be helpful to someone.

If you have complaints or corrections, please contact me via DM on Twitter below.

See you!