Section 03: Conditional Content & Lists - Rendering More...Sometimes

 

 

V-if

The v-if directive allows you to conditionally render or display an element or a block of elements based on a specified expression. If the expression evaluates to true, the element or block will be rendered and displayed in the DOM (Document Object Model). If the expression evaluates to false, the element or block will be removed from the DOM.

<div>
  <p v-if="showMessage">This message will be displayed if showMessage is true.</p>
  <p v-else>This message will be displayed if showMessage is false.</p>
</div>

In this case, if showMessage is true, the first <p> element will be rendered; otherwise, the second <p> element will be rendered.
The v-if directive provides a powerful way to conditionally render elements in Vue.js based on the state of your application or component.

 

What is V-show?

In Vue.js, the v-show directive is another way to conditionally control the visibility of elements in the DOM, similar to v-if.

While v-if completely adds or removes elements from the DOM based on the condition, v-show toggles the CSS display property of the element, effectively hiding or showing it.

Here's an example of how v-show is used in a Vue template:

 

<div>
  <p v-show="showMessage">This message will be shown or hidden based on the value of showMessage.</p>
</div>

In this example, if the showMessage property in the Vue instance is true, the <p> element will be displayed with the CSS property display: block. If showMessage is false, the <p> element will be hidden with the CSS property display: none. The element is still present in the DOM, but not visible.

Unlike v-if, v-show does not perform the costly process of adding or removing elements from the DOM. Instead, it utilizes CSS to control the visibility, which can be more efficient for frequent toggling.

You can also combine v-show with other directives like v-else:

<div>
  <p v-show="showMessage">This message will be shown if showMessage is true.</p>
  <p v-else>This message will be shown if showMessage is false.</p>
</div>

In this case, the first <p> element will be displayed if showMessage is true, and the second <p> element will be displayed if showMessage is false.

Overall, v -show provides a way to conditionally show or hide elements in the DOM without the overhead of adding or removing them, making it useful for situations where frequent toggling of visibility is required.

 

What is V-for?

In Vue.js, the v- for directive is used to render a list of items or iterate over an array or an object in a template, generating multiple elements based on the data source.

Here's an example of how v-for is used in a Vue template:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

In this example, v- for is used to iterate over the items array in the Vue instance. For each item in the array, a <li> element is generated, and the {{ item.name }} expression displays the name property of each item. The :key attribute is necessary to help Vue efficiently update the list by providing a unique identifier for each item.

You can also access the index of the current iteration using the optional second parameter of v-for:

 

<ul>
  <li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
</ul>

In this modified example, the index of each item is available as the second parameter in the (item, index) syntax. The {{ index + 1 }} expression displays the index incremented by 1, creating a numbered list.

v-for can also iterate over an object's properties. In this case, it provides the (value, key, index) syntax:

 

<div>
  <p v-for="(value, key, index) in object" :key="index">{{ key }}: {{ value }}</p>
</div>

In this example, v-for iterates over the properties of the object and displays each key-value pair within a <p> element.

The v- for directive is a powerful tool in Vue.js for generating dynamic content based on arrays or objects. It allows you to easily render lists, tables, or any other repeating structure in your templates.

 

 

Using index for key is not a good idea cause if we remove one item, the index is automatically updated