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
>pug if.pug
rendered if.html
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
>pug if-else.pug
rendered if-else.html
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
>pug if-else-if.pug
rendered if-else-if.html
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>
In this article we learned about some basic conditional statements in pugjs.