Conditional Rendering of Html in Vue JS

To render the html based on the specific conditions of the states you can use the if and else conditioning as an attribute in the html parent tags so that under that whole parent any child that will come will render according to the condition.

For example:-

1. For simple IF and ELSE

This means if status will be true then the upper will be rendered otherwise the second will be rendered.

<div v-if="status==true">
    <h1>The status is true</h1>
</div>
<div v-else>
    <h1>The status is false</h1>
</div>        

1. For multiple if,else conditions

<div v-if="value == 1"
   <h1>The value is 1</h1>
</div>
<div v-else-if="value == 2">
   <h1>The value is 2</h1>
</div>
<div v-else-if="value == 3">
   <h1>The value is 3</h1>
</div>
<div v-else-if="value == 4">
   <h1>The value is 4</h1>
</div>>        

One thing to be noted that the states you will be using for comparing they should be defined in the data.

 name: "Login"
  data() {
    return {
      status: false,
      value:2
    };
  },
  components: {
    // Invoice,
  },,        

You can connect me at Github Link

Thank you.