Lightning Component 控制样式显示隐藏的两种方式；

1.使用Component js方法： $A.util.removeClass 和 $A.util.addClass 调用Css样式，从而改变组件样式

<aura:component>
<div class="css_SearchDiv"  style="background-size:cover;background-position: center; background-image: url(https://kk--kksandbox--c.cs6.visual.force.com/resource/1549939044000/BackgroundLogo);" >
            <div class="SearchDiv">
                
                <ui:inputText class="SearchInput" value="{!v.InputValue}"  aura:id="SearchInput" keyup="{!c.keyDown}"/>
                <button class="reset" οnclick="{!c.removeAction}" type="button">✖</button>
                <lightning:buttonMenu class="SearchMenu" aura:id="SearchbuttonMenu"  οnselect="{!c.handleSelect }" alternativeText="Show menu"  label="{!v.Pro_Name}" iconName="utility:down">
                    <lightning:menuItem label="所有产品" value="所有产品" />
                    <aura:iteration items="{!v.ProductList}" var="pro_list">
                        <lightning:menuItem label="{!pro_list.Label}" value="{!pro_list.Label}" />
                    </aura:iteration>
                </lightning:buttonMenu>

                <lightning:button οnclick="{!c.SearchAction}" class="Searchbutton" iconName="utility:search" />
               
            </div>
        </div>

 　　<lightning:button οnclick="{!c.ErrorMethod }" class="Searchbutton" iconName="utility:search" />

</aura:component>

ErrorMethod : function(component, event) {
    var cmpSarchInput = component.find('SearchInput');
    $A.util.removeClass(cmpSarchInput, 'addSarchStyle');
}

.THIS .addSarchStyle{

    width:432px;   
}

2.使用标准的<aura:if>  isTrue 如果等于 true 就展示所包括的内容

<aura:component>
<aura:attribute name="loaded" type="Boolean" default="false" />

<lightning:button οnclick="{!c.SearchMethod }" class="Searchbutton" iconName="utility:search" />

<aura:if isTrue="{!v.loaded }">
            <lightning:spinner variant="brand" size="large" alternativeText="Loading" class="exampleHolder"/>
        </aura:if>

</aura:component>


/*******************************************************************************************************************************************/

<aura:component>
    <aura:if isTrue="{!v.truthy}">
    True
    <aura:set attribute="else">
      False
    </aura:set>
  </aura:if> 
</aura:component>

js：

 SearchMethod : function(component, event, helper) {
        component.set("v.loaded",true);
}

 

转载于:https://www.cnblogs.com/pipidan/p/10557729.html