Conditionals and Loops in Vue Native

In this tutorial i am going to show how to use v-for and v-if for looping and condtion checking in vue js. We will see it with example and i will explain how they work. 

Let's strat our vue js second tutorial. 

v-if

First I'll use the most basic example of using v-if . You create an HTML file which contains below code

Now if you run this code, you will see the below output

Now here seen is true, that's why we can see this in browser but if you wanna make it disappear, then you have to do this thing.

Go ahead and enter app.seen = false in the console. You should see the message disappear. Or just make it false from code, then it will disappear.

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. 

v-for

There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:

Now if you run this code, you will see the below output

Here in vue js v-for loop, first i put todos object into todo. Then just print it to access its values.In the console, enter app.todos.push({ text: 'New item' }). You should see a new item appended to the list.