Conditionals and loops in Vue.js
Tags: vue, javascript, tutorial, beginners
Published: 2022-01-08 04:15:16

In my previous post I covered the basics of using Vue in our web application. In this tutorial I will cover two of the most important feature or fundamental structures of Vue, conditionals and loops. It's worth mentioning as we go towards more advanced topics in the upcoming blogs we'll use what we learned in the previous tutorials to solve more complex problems. For now, let's keep it short and simple.

Let's again start by creating a file named `index.html` and import Vue in the `head` tag like this:

``` html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
...
```
Now we want to conditionally render a tag based on a random value. Let's say we have a tag like this:

``` html
<div>I'm displayed randomly</div>
```
To do so let's create a file named `index.js` and create an instance of Vue.

``` javascript
var app = new Vue({
  el: '#app'
})
```
We want to attach this instance to an element with id `app` so let's wrap our dynamically rendered code inside a `div` and give it the id `app`

``` html
<div id="app">
  <div>I'm displayed randomly</div>
</div>
```
Now we add a boolean property to our instance and set its value randomly to true or false:

``` javascript
var app = new Vue({
  el: '#app',
  data: {
    random: Math.random() > 0.5,
  }
})
```
And we use a `directive` named `v-if` to render the div only if `random` is true:

``` html
<div id="app">
  <div v-if="random">I'm displayed randomly</div>
</div>
```
> The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

Matho.random() generates a number between 0 and 1, so we expect almost half of the times we refresh the page, we see the message.

Next, let's render a list of colours with `v-for` directive. We add an array containing such names to our vue instance first.

``` javascript
var app = new Vue({
  el: '#app',
  data: {
    random: Math.random() > 0.5,
    colours: ["red", "blue", "black", "green"]
  }
})
```
Now we can simply use `v-for` to render the list:
``` html
<ol>
  <li v-for="colour in colours">
    {{colour}}
  </li>
</ol>
```
> We can use the `v-for` directive to render a list of items based on an array. The `v-for `directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.

Finally this is how our `index.html` file looks like:

``` html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="random">I'm displayed randomly</div>
      <ol>
        <li v-for="colour in colours">{{colour}}</li>
      </ol>
    </div>
    <script src="./index.js"></script>
  </body>
</html>
```

Now that we have our code ready, let's deploy it on  [utopiops](https://www.utopiops.com). 

Head over to the `Fully managed applications` section as we want to use free static website deployment and hosting that Utopiops offers.

![Screen Shot 2021-12-31 at 8.16.15 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944738538/QMMZQKUtp.png)

Now we choose `Static website` as the application type to be created. (Utopiops also offers free plans for `Function` and `Dockerized` applications)


![Screen Shot 2021-12-31 at 8.16.35 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640944848567/j_pE1HukP.png)

Now the only thing we need to know is to specify the  [repository](https://github.com/mkamrani/alpinejs-helloworld-utopiops)  that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

Remember we don't need to provide any build command!


![Screen Shot 2022-01-08 at 3.03.38 pm.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641614625381/LKjaHrSKe.png)


And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.

https://vuejs-conditional-loops-bd885053.sites.utopiops.com

Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.


You can find the source code  [here](https://github.com/mkamrani/vuejs-conditional-loops).