【vue.js】③[v-show]で表示の切り替えを行う（Vue.jsから始めるJavaScriptフレームワーク）

2019/03/05 2019/03/10

DOMを使用せずに表示を切り替える[v-show][v-on]

「押してください」ボタンをクリックしてみます。

→ 直下に文字が表示されます。

今回はこれを作ってみようと思います。

【HTML】

<body>
    <p>■条件分岐</p>
    <p>コンソールで app.show=falseを入力</p>
    <!-- ルートのテンプレート -->
    <div id="app">
        <button v-on:click="txtSwitch">押してください</button>
        <p v-show="show">★押してくれた！★</p>
    </div>
</body>

HTML部分

【表示を切り替えたいタグ】：[v-show=”【名前】”]を付ける。

【切り替え担当のボタン】：[v-on=”【名前】”]を付ける。

HTMLで適当に作ったら、次は切り替えの処理を書いていきます。

【Javascript】

<script>
    var app = new Vue({
        el: "#app",
        data: {
            show: false
        }
        methods: {
            showUnderText: function () {
                this.show = true
            }
        }
    })
</script>

処理はたったの11行です。