Conditionals and Loops | 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

v-if output
Now you see me

 

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.

v-if-and-v-for-vue-js

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

v-for output
Banana
Apple
Mango

 

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.

A web enthusiastic, self-motivated Full-Stack Web Developer from Dhaka, Bangladesh with experience in developing applications using JavaScript, Laravel & Wordpress specifically. Facebook Github Website