There are different types of directives in vuejs.The directives are mostly used for conditional rendering,iteration,binding and so on.
These are the types of directives in vue
This is a conditional rendering directive which is used to add or remove an element based on the condition. it is used to render the element if the condition is true. Let us see this simple example to understand v-if.
<template>
<div v-if="showme" >
Hello How are You !!!
<div>
<template>
<script>
var vm=new vue({
data:{
showme:true;
}
})
The above example, shows the div only if the condition for showme satisfies.if showme is true then div will be shown , suppose the showme is false then div will not be shown.
Let us consider the scenario,suppose showme is true then display one div , otherwise display another div. Come,Let us understand by this example.
<template>
<div v-if="showme" >
Hello How are You !!!
<div>
<div v-else-if="!showme" >
OOPS , i am another div
<div>
<template>
<script>
var vm=new vue({
data:{
showme:true;
}
})
Let us see the example of v-else.
<template>
<div v-if="cnt==0" >
FIRST DIV !!!
<div>
<div v-else-if="cnt==1" >
OOPS , i am second div
<div>
<div v-else="cnt==2" >
OOPS , i am third div
<div>
<template>
<script>
var vm=new vue({
data:{
cnt:0;
}
})
v-model is well known for its two way binding.Let us understand v-model using this simple example.
<template>
<div >
<input v-model="petanimal">
<div>
<div v-else-if="cnt==1" >
My favourite pet animal is :{{petanimal}}
<div>
<template>
<script>
var vm=new vue({
data:{
petanimal:Dog;
}
})
v-for is very useful when you are going to iterate over the list of items.Please see the below example to understand the usage of for loops in vuejs.
<template>
<div >
<input v-model="petanimal">
<div>
<div v-for="(value,key) in items" v-bind:key="value" >
<div>
<template>
<script>
var vm=new vue({
data:{
items:[
"product 1",
"product 2",
"product 3",
"product 4",
"product 5",
]
}
})
v-bind is also known as one way data binding.It is used to bind value from script to template.Since we bind data from business logic to template ,it is said to be one way data binding. Please see below to understand it by an example.
<template>
<div >
<input v-model="petanimal">
My favourite pet animal is :{{petanimal}}
<div>
<h1 v-bind:name="fullname" >
<h1>
<template>
<script>
var vm=new vue({
data:{
fullname:'Lord Muruga',
petanimal:'Hen'
}
})
v-show is used to show or hide different HTML elements conditionally.If we want to hide or show something based on specific tag, then we can very well use this v-show tag.
<template>
<div v-show="isVisible" >
<input v-model="petanimal">
My favourite pet animal is :{{petanimal}}
<div>
<h1 v-bind:name="fullname" >
<h1>
<template>
<script>
var vm=new vue({
data:{
fullname:'Lord Muruga',
petanimal:'Hen',
isVisible:true
}
})
From the above example, it is very well understood that isVisible is true then show the 'My Favourite Pet animal' div.
v-on:click event is used to add a click event to an element.Let us see the below example to understand better.
<template>
<div>
<button v-on:click="DisplayPet">
<div>
<template>
<script>
var vm=new vue({
data:{
petanimal:'Hen'
},
methods:
{
DisplayPet:function(){
this.$alert("My Favourite Pet is " + this.petanimal);
}
}
})