Use Getters and Setters
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <lightning-card title="Two way data binding"> <div class="slds-var-m-around_medium"> <lightning-input type="text" label="Enter name" onkeyup={changeHandler}> </lightning-input> <div>{name} is a course of {title}</div> </div> </lightning-card> <lightning-card title="@track properties"> <div class="slds-var-m-around_medium"> <lightning-input type="text" label="Enter city" onkeyup={trackHandler}> </lightning-input> <div>{address.city} is my City</div> </div> </lightning-card> <lightning-card title="Getter Demo"> <div class="slds-var-m-around_medium"> <div>First username is {firstUser}</div> <div>Multiplication of {num1} and {num2} is {multiply}</div> </div> </lightning-card> </template> |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { LightningElement, track } from 'lwc'; export default class HelloWorld extends LightningElement { /***Data binding example */ name="John Doe" title ="John John" changeHandler(event){ this.title = event.target.value } /***@track binding example */ @track address={ city:'Hotlanta', postcode:30329, country:'USA' } trackHandler(event){ this.address.city = event.target.value } /***getter example */ users = ["John", "Jane", "Doe"] num1 = 10 num2 = 20 // this.firstUser =this.users[0] get firstUser(){ return this.users[0].toUpperCase() } get multiply(){ return this.num1*this.num2 } } |
Lightning Aura Component CSV Uploader Conditional Rendering in LWC