動的な表示切り替えを可能とするVue.jsの使い方

はじめに

前回、Vue.jsの基礎について記事を書きましたが、もう少し踏み込んだ動的な表示切り替えをする使い方をまとめました。
（今後も追加していくかも？）

前回記事：軽量・シンプルな思想でデータバインディングができるVue.jsの基礎まとめ

追記（2016年12月1日）

この記事は公式日本語ドキュメントが無い時代に書いた記事です。
公式の日本語ドキュメントができたので、今後はこちらをご覧ください。

要素の生成を分岐するv-if

値がtrueなら、DOMが生成されます。逆にfalseなら生成されない。

例

HTML

<div id="vue">
    <div v-if="val">
       ...
    </div>
</div>

変数だけじゃなくて、以下のように式も入れられます。

<div id="vue">
    <div v-if="val + hoge || fuga">
       ...
    </div>
</div>

JavaScript

var vue = new Vue({
    el: '#vue',
    data:{
        val: false
    }
});

変数valを動的にtrue or falseを入れて、画面全体や一部エリアの表示を切り替えたりなどに使用。

アニメーションさせるv-transition

バインドタイミングでアニメーションをつけられます。
アニメーション処理は、CSSを使用。

例

HTML

v-transition="anime"をつけます。
anime部分は任意文字。

<div id="vue">
    <div transition="anime">hello</div>
</div>

CSS

HTMLの属性値が、***-enter, ***-leaveというクラス名の***部分に付与されます。
今回の場合はanime。

***-enterはバインドされた時、***-leaveはバインドが外れた時（false時）にクラス名が付与されアニメーションされます。

.anime-enter {
    animation: anime-in 1s ease-in;
}
.anime-leave {
    animation: anime-out 1s ease-out;
}
@keyframes anime-in {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes anime-out {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

おまけ

stagger="100"属性をつけると、複数要素にアニメーションつけた場合、間隔時間を調整できます。
値は変更可能。（1000 = 1秒）

例えば、データに合わせて数字やボックスを、順番にフェードインなどといったことが可能になります。

<div id="vue">
    <div transition="anime" `stagger="100"`>hello</div>
</div>