Lesson: 04 | Switch Statement

Description

You can use a switch statement to conditionally execute code blocks based on a given value.

HTML

<template>
  <lightning-card title="Switch Example">
    <div class="slds-m-around_medium">
      <lightning-input label="Enter a number:" type="number" value={number} onchange={handleNumberChange}></lightning-input>
      <p>Result: {result}</p>
    </div>
  </lightning-card>
</template>

Java Script

In this example, we have a lightning-input component to allow the user to input a number, and a paragraph to display the result. The result will be calculated based on the number input using a switch statement in the JavaScript controller.

import { LightningElement, track } from 'lwc';

export default class SwitchExample extends LightningElement {
  @track number;
  @track result;

  handleNumberChange(event) {
    this.number = event.target.value;
    switch (this.number) {
      case '1':
        this.result = 'You entered one.';
        break;
      case '2':
        this.result = 'You entered two.';
        break;
      case '3':
        this.result = 'You entered three.';
        break;
      default:
        this.result = 'Invalid input.';
    }
  }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 11 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 04 | Switch Statement

Description

Lightning Web Components