【Vue.js】v- ディレクティブまとめ③～条件分岐補足～

前回のv-から始まるディレクティブまとめはこちら↓
※前回はif等の条件分岐についてでした。

その他のv-ディレクティブについてまとめた記事はこちら↓

v-show

切り替えをしたい時につかうディレクティブ。
v-ifと同じように使用することができる。
＜v-ifとの違い＞
1.v-ifはfalseの時、ソースコードから消えて見えなくなるが、v-showはcssのdisplay:none;で見えなくしているだけ。
2.HTMLのtemplateタグには使用できない。
　→templateタグは、ソースコード上で要素として認識・表示されないためcssを適用する事が出来ない。

    <div id="app">
        <div v-show="text">
            <p>textがtrueになりました</p>
            <p>再度ボタンを押すとfalseになって表示されなくなります。</p>
        </div>
        <button @click="text = !text">button</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                text:true,
            }
        })
    </script>

挙動はこちら↓

textがtrueになりました

再度ボタンを押すとfalseになって表示されなくなります。