Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jマークアップの動的な表示または非表示
マークアップの表示の切り替えに CSS を使用できます。ただし、<aura:if> は必要になるまで囲まれた要素ツリーを保留するため、この使用をお勧めします。
<aura:if> の使用例については、「条件付きマークアップのベストプラクティス」を参照してください。
次の例では、$A.util.toggleClass(cmp, 'class') を使用してマークアップの表示を切り替えます。
1<!--c:toggleCss-->
2<aura:component>
3 <lightning:button label="Toggle" onclick="{!c.toggle}"/>
4 <p aura:id="text">Now you see me</p>
5</aura:component>1/*toggleCssController.js*/
2({
3 toggle : function(component, event, helper) {
4 var toggleText = component.find("text");
5 $A.util.toggleClass(toggleText, "toggle");
6 }
7})1/*toggleCss.css*/
2.THIS.toggle {
3 display: none;
4}c:toggleCss コンポーネントをアプリケーションに追加します。CSS クラスを切り替えてテキストの非表示または表示を行うには、[切り替え] ボタンをクリックします。