Day 5: Vue.js Instance and Directives - Part 2
Table of Contents
Continuing our journey into Vue.js directives, today we’ll focus on three more directives: v-show, v-for, and v-bind. We’ll understand their purpose and see how they’re used in Vue.js applications.
Understanding v-show and v-for Directives
v-show: Similar to v-if, the v-show directive is used to conditionally display elements. The difference is that v-show always renders the element in the DOM and simply uses CSS to toggle its visibility, while v-if only renders the element into the DOM if the condition is true.
Here’s an example of v-show usage:
<p v-show="showMessage">Hello, world!</p>
In this example, the paragraph will always be rendered in the DOM, but it will only be visible if the showMessage property of the Vue instance is true.
v-for: The v-for directive is used for rendering lists of items using the template. The syntax is similar to JavaScript’s for…of or for…in loops.
Here’s an example of v-for usage:
<ul>
<li v-for="item in items" :key="item.id">
</li>
</ul>
In this example, the v-for directive will create a new li element for each item in the items array. Each item’s text will be displayed in the li element.
Exploring v-bind Directive and Its Usage
The v-bind directive is used to reactively update an HTML element’s attributes based on the properties of the Vue instance. The shorthand for v-bind is simply “:”.
Here’s an example of v-bind usage:
<img v-bind:src="imageSrc">
In this example, the src attribute of the img tag will be set to the value of the imageSrc property of the Vue instance. If the imageSrc property changes, the image displayed will also change.
That’s all for today! Tomorrow, we’ll dive into Vue.js components and understand how they help in building complex UIs. See you then!