マークアップの動的な表示または非表示

マークアップの表示を切り替えるときは CSS を使用します。<aura:if> または <aura:renderIf> タグを使用することもできますが、より標準的なアプローチである CSS の使用をお勧めします。

次の例では、$A.util.toggleClass(cmp, 'class') を使用してマークアップの表示を切り替えます。

1<!--docsample:toggleCss-->
2<aura:component>
3    <ui:button label="Toggle" press="{!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}

[切り替え] ボタンをクリックすると、CSS クラスが切り替えられ、テキストが表示または非表示になります。