Directives are special attributes with the v- prefix. Vue provides built-in directives for common tasks like conditional rendering, list rendering, and form input binding.
Vue.js
Beginner
10 min read
Vue Directives
Example
<template>
<div>
<!-- v-bind: bind attributes -->
<img :src="imageUrl" :alt="imageAlt">
<!-- v-model: two-way binding -->
<input v-model="username" placeholder="Enter name">
<p>Hello, {{ username }}</p>
<!-- v-show vs v-if -->
<p v-show="isLoggedIn">Welcome back!</p>
<p v-if="!isLoggedIn">Please log in.</p>
<!-- v-for with index -->
<ol>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ol>
<!-- v-on shorthand @ -->
<button @click.prevent="handleClick">Submit</button>
</div>
</template>