pug.js tutorial | Pug Conditionals

Overview

In this part of the pugjs tutorial series we will learn about the conditional statements available such as if, else-if, else and unless.

if conditional statement

													
//Name of the file : if.pug
- var website = { name: 'Nodejsera.com' }
#website
  if website.name
    h3.nj-head Name
    p.nj-body= website.name

You can run the above code using the following command :

													
>pug if.pug

  rendered if.html

Now open the if.html file and observe the interpolated content from pug to html.

													
<div id="website">
    <h3 class="nj-head">Name</h3>
    <p class="nj-body">Nodejsera.com</p>
</div>

else conditional statement

													
//Name of the file : if-else.pug
- var website = { name: '' }
#website
  if website.name
    h3.nj-head Name
    p.nj-body= website.name
  else
    h3.nj-head Name
    p.nj-body Not Provided by the user

You can run the above code using the following command :

													
>pug if-else.pug

  rendered if-else.html

Now open the if-else.html file and observe the interpolated content from pug to html.

													
<div id="website">
    <h3 class="nj-head">Name</h3>
    <p class="nj-body">Not Provided by the user</p>
</div>

else if conditional statement

													
//Name of the file : if-else-if.pug
- var nodejsera = { description: 'Nodejsera deals with node.js and other web related technologies' }
- var rishabhio = { description: 'Rishabhio deals with Angular 4, IOT related stuff,etc' }
- var website = { selected: 'rishabhio' }
#website
  if website.selected == 'nodejsera'
    h2.nj-head Nodejsera
    p.nj-body= nodejsera.description
  else if website.selected == 'rishabhio'
    h2.nj-head Rishabhio
    p.nj-body= rishabhio.description
  else
    h2.nj-head Website
    p.nj-body No website selected

You can run the above code using the following command :

													
>pug if-else-if.pug

  rendered if-else-if.html

Now open the if-else-if.html file and observe the interpolated content from pug to html.

													
<div id="website">
    <h2 class="nj-head">Rishabhio</h2>
    <p class="nj-body">Rishabhio deals with Angular 4, IOT related stuff,etc</p>
</div>

What we learned

In this article we learned about some basic conditional statements in pugjs.

Repository

Get it from :

Pug.js tutorial : Pug - Conditionals

Inside this article!