コリラボ

技術の学びの備忘録

Vue.js

v-elseでさらに条件分岐

v-elseでさらに条件分岐

v-ifで条件を分岐させることができた。がやりたいことが出てきた。

  • falseの場合はなんか表示したい。

  • もう一度ボタンを押したらtrueに戻したい。 ということで実装だ。

    Html側

<div id="app">
    <span v-if="seen">seen is true</span>
    <span v-else>seen is false</span>
    <button @click="change">押す</button>
</div>

<span v-else>seen is false</span>を追加した。

ハマったポイント

    <span v-if="seen">seen is true</span>
    <button @click="change">押す</button>
    <span v-else>seen is false</span>

これだとうまく動かなかった。

JS側

<script>
    var app = new Vue({
        el: '#app',
        data: {
            seen: true
        },
        methods: {
            change: function(){
                if(this.seen) {
                    this.seen = false;
                }else {
                    this.seen = true;
                }
            }
        }
    })
</script>

ハマったところ

function内もv-ifv-else使うのかと思っていた。実際はv-ifではなくifとelseで普通に書ける。

完成形

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="seen">seen is true</span>
    <span v-else>seen is false</span>
    <button @click="change">押す</button>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            seen: true
        },
        methods: {
            change: function(){
                if(this.seen) {
                    this.seen = false;
                }else {
                    this.seen = true;
                }
            }
        }
    })
</script>
</html>

動くサンプル

動くサンプルはこちら