Use Getters and Setters
HTML
<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:
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