EP.2 - Data Binding & Rendering

🪓 예제

1) bindHTML

<template>
    <lightning-card  variant="Narrow"  title="Data Binding" icon-name="standard:account">
        <p class="slds-p-horizontal_small">Hello, {myValue}!</p>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class BindHTML extends LightningElement {
    myValue = "H E L L O ";
}

2) bindHTMLDynamic

<template>
   <lightning-card  variant="Narrow"  title="Data Binding Dynamically" icon-name="standard:account">
       <p class="slds-p-horizontal_small">Hello, {myValue}!</p>
       <br/>
       <div class="slds-p-around_medium lgc-bg">
           <lightning-input type="text" label="Enter some text" value={myValue} onchange={handleChange}></lightning-input>
       </div>
   </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class BindHTMLDynamic extends LightningElement {
    myValue = "헬로";
    handleChange(event) {
        this.myValue = event.target.value;
    }
}

3) getterExpresion

<template>
    <lightning-card  variant="Narrow"  title="Data Binding using Getter Expressions" icon-name="standard:account">
        <p class="slds-p-horizontal_small">Hello, {upperCaseName}!</p>
        <br/>
        <div class="slds-p-around_medium lgc-bg">
            <lightning-input type="text" name="firstName" label="First Name" onchange={handleChange}></lightning-input>
            <br/>
            <lightning-input type="text" name="lastName" label="Last Name" onchange={handleChange}></lightning-input>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class GetterExpression extends LightningElement {
    firstName = '';
    lastName  = '';
    handleChange(event) {
        const field = event.target.name;
        if(field === 'firstName') {
            this.firstName = event.target.value;
        } else if(field == 'lastName') {
            this.lastName = event.target.value;
        }
    }
    get upperCaseName() {
        return `${this.firstName} ${this.lastName}`.toUpperCase();
    }
}

4) conditionalRendering

<template>
    <lightning-card  variant="Narrow"  title="Data Binding using Getter Expressions" icon-name="standard:account">
        <p class="slds-p-horizontal_small">Hello, {upperCaseName}!</p>
        <br/>
        <div class="slds-p-around_medium lgc-bg">
            <lightning-input type="text" name="firstName" label="First Name" onchange={handleChange}></lightning-input>
            <br/>
            <lightning-input type="text" name="lastName" label="Last Name" onchange={handleChange}></lightning-input>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class GetterExpression extends LightningElement {
    firstName = '';
    lastName  = '';
    handleChange(event) {
        const field = event.target.name;
        if(field === 'firstName') {
            this.firstName = event.target.value;
        } else if(field == 'lastName') {
            this.lastName = event.target.value;
        }
    }
    get upperCaseName() {
        return `${this.firstName} ${this.lastName}`.toUpperCase();
    }
}