Common Directives in Vue.js

v-if: Conditionally renders an element based on the truthiness of the expression provided.

html
Copy code
<p v-if="isVisible">Visible Content</p>

v-for: Renders a list of items by iterating over an array or object.

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

v-bind: Dynamically binds one or more attributes or a component prop to an expression.

html
Copy code
<img v-bind:src="imageSrc" />

v-on: Attaches an event listener to an element.

html
Copy code
<button v-on:click="handleClick">Click me</button>

v-model: Creates two-way data binding on form elements like inputs and textareas.

html
Copy code
<input v-model="inputText" />

Leave a comment

Your email address will not be published. Required fields are marked *