AURA 연산자 사용법

이전 글 삼항연산자도 포함된 내용입니다.

• if문 - 삼항연산자

<aura:component>
	<!-- true, false로 구분 / 기본값은 false -->
	<aura:attribute name="addByActive" type="Boolean" default="false" />

    <div class="{!v.addByActive == true ? 'hello active':'hello'}">
    <!-- / 클릭 시 v.addByActive 값이 true가 된다. -->
        <button class="btn" onclick="{!c.addActive}">ADD</button>
    </div>
</aura:component>

• AND 연산자

<aura:component>
	<!-- true, false로 구분 / 기본값은 false -->
	<aura:attribute name="iphone" type="Boolean" default="false" />
    <aura:attribute name="airPods" type="Boolean" default="false" />
    
	<!-- 두 가지를 모두 포함하고 있을 경우 -->
    <div class="{!and(v.iphone == true, v.airPods == true)}">
		<p>둘 다 있으면 True</p>
    </div>
    <!-- 위와 동일한 결과입니다. -->
    <div class="{!v.iphone == true && v.airPods == true}">
		<p>둘 다 있으면 True</p>
    </div>
</aura:component>

• OR 연산자

<aura:component>
	<!-- true, false로 구분 / 기본값은 false -->
	<aura:attribute name="iphone" type="Boolean" default="false" />
    <aura:attribute name="airPods" type="Boolean" default="false" />
    
	<!-- 두 가지 중 하나를 포함하고 있을 경우 -->
    <div class="{!or(v.iphone == true, v.airPods == true)}">
		<p>둘 중 하나라도 있으면 True</p>
    </div>
    <!-- 위와 동일한 결과입니다. -->
    <div class="{!v.iphone == true || v.airPods == true}">
		<p>둘 중 하나라도 있으면 True</p>
    </div>
</aura:component>

• NOT 연산자

<aura:component>
	<!-- true, false로 구분 / 기본값은 false -->
	<aura:attribute name="iphone" type="Boolean" default="false" />
    <aura:attribute name="airPods" type="Boolean" default="false" />
    
	<!-- not을 썻을 경우 -->
    <div class="{!not(v.iphone == true)}">
		<p>겔럭시 유저입니다.</p>
    </div>
    
    <!-- 위와 동일한 결과입니다. -->
    <div class="{!not(v.iphone != true)}">
		<p>겔럭시 유저입니다.</p>
    </div>
</aura:component>