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

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

【Vue.js】v-　ディレクティブまとめ②～条件付きレンダリング～

v-から始まるディレクティブのまとめ記事はこちら↓v-ifif文。条件がtrueもしくはfalseの時に実行される。 <div id="app"> <p v-if="text">trueです。</p>...

morymory.com

2020.01.20

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

【Vue.js】v-ディレクティブまとめ

Vue特有のv-から始まるディレクティブをまとめてみました。＜環境＞Vue.js v2v-textdataの文字列表示。{{}}と同じ意味を持ち、同じ使い方をする。<h1 v-text="messag...

morymory.com

2020.01.27

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>

挙動はこちら↓