Hello friends. Today I will introduce you to a new series about Vuejs. Specifically, I will introduce you about Conditional in Vuejs.

In this article we will learn about Conditional rendering. I think this will be something you use a lot in your work.

• v-if
  • Group conditional with v-if on <template> tag
  • v-else
  • v-else-if
  • Control the reuse of the element with the key
• v-show
• v-if and v-show
• v-if used with v-for

v-if

In template translation libraries like Handlebars , we will usually write conditional blocks as follows:

To do this with Vue, we use the v-if directive:

We can also add the “else” block with v-else :

Group conditional with v-if on <template> tag

As a directive, v-if must be used on a single element ( <p> or <div> . What if we want to toggle a group of elements on? Just use v-if on a <template> element as a wrap. The final render will not have this <template> element.

v-else

As mentioned above, we can use the v-else directive to assign a “else” block to v-if :

To be considered valid, an element with v-else must immediately follow a v-if or v-else-if element.

v-else-if

The v-else-if directive acts as an “else if” block for v-if . This directive can be used multiple times in succession:

Similar to v-else , elements with v-else-if must immediately follow a v-if or v-else-if elements.

Control the reuse of the element with the key

Vue tries to render elements as efficiently as possible, with one of them being to reuse instead of creating new ones from scratch. In addition to helping Vue operate extremely fast, this has a number of other significant benefits. For example, if you allow users to switch between multiple logins:

then changing the value of loginType in the above code will not delete the information that the user has entered. Because both <template> use the same elements, the <input> element will not be replaced, only the placeholder attribute is changed.

However, this is not always what you want. Therefore, Vue provides an attribute called a key . When using a key with a unique value, you’re essentially telling Vue “to see these two elements as completely different and don’t use them again”:

Now these two <input> elements will be loginType from the beginning every time the loginType value is changed.

Note that the <label> element is still reused because there is no key attribute.

v-show

Another option for showing or hiding a conditional web element is the v-show directive. The way to use v-show is similar to v-if :

The difference between v-show and v-if is that elements marked with v-show will always be rendered and contained in the DOM; v-show only display the display property to be turned on and off.

v-show doesn’t support <template> tag nor does it work with v-else .

v-if and v-show

v-if is rendered under “true” conditions, because it ensures that the event listener and child components within the conditional block are canceled and re-initialized during the on / off process.

v-if also lazy : if the condition value is false on the first render, it will do nothing – the conditional block will not be rendered until the condition becomes true the first time.

Meanwhile, v-show is much simpler – the element will be rendered regardless of whether the condition is true or false, and only shown / hidden by CSS.

In general, v-if has high on / off costs, and v-show has high render costs. So, if you need to turn on / off frequently, use v-show . Conversely, if conditions rarely change throughout the life of an application, use v-if .

v-if used with v-for

When used with v-if , v-for has a higher priority.

I have introduced you to Conditional and some concepts such as v-if , v-else , v-else-if , v-show in Conditional VueJs. If you have any questions, please leave a comment below.

Refer

https://vuejs.org/v2/guide/conditional.html