Conditional rendering in lightning web component

If we want to render HTML conditionally we can make use of if:true={propertyName},if:false={propertyName} in nested template tag.

.html file

<template>

    <template if:true={fname}>

        <h1>First name is Farukh</h1>

    </template>

    <template if:false={lname}>

        <h1>Last name is Haider</h1>

    </template>

    <lightning-button label="Show first name" onclick={showFirstName}>

    </lightning-button>

    <lightning-button label="Show last name" onclick={showLastName}>

    </lightning-button>

</template>

.js file

/* eslint-disable no-console */

import {

   LightningElement,

   track

} from 'lwc';

export default class webcomp4 extends LightningElement {

   @track fname = true;

   @track lname = false;

   showFirstName() {

      this.fname=true;

      this.lname=true;

   }

   showLastName() {

      this.fname=false;

      this.lname=false;

   }

}

OUTPUT