Follow by Email

VueJS Conditions and Loops


Conditions & Loops in template are as follows :
v-if  : It will apply "if" condition in the html template.
     Ex : In index.html



      <div id="vueapp">
<div v-if="main">
If condition applied</div>
</div>


    Ex : In index.js


   

    var app = new Vue({
    el: '#vueapp',
    data: {
           main: true
      }
    })



v-for : It will allow applying  "for" loop in the html, mainly used to display the data from an array.
Ex : In index.html



        

 var app = new Vue({
    el: '#vueapp',
    data: {
      main: true
    }
  })
 
   Ex : In index.js




    var app = new Vue({
            el: '#vueapp',
            data: {
             dataarr: [
             { name: 'Rahul' },
             { name: 'Dinesh' },
             { name: 'Kunal' }
           ]
       }
    })