Vue.jsの練習③

引き続き、忍者コードの練習問題を解いていきます。

練習ページ：https://skblogwp.com/practice/javascript/article_006/

やりたいこと
HTML
CSS
Vue.js
まとめ
1. 1. v-if="show"
2. 2. v-else

やりたいこと

HTML

<div id="app_3">
     <div v-if="show">
         <p class="text text-success">NinjaCODE 楽しい!!</p>
     </div>
     <div v-else="">
         <p class="text text-danger">NinjaCODE 難しい....</p>
     </div>
</div>

CSS

#app_3 .text{
    margin: 30% auto;
    font-size: 2rem;
    text-align: center;
    border-bottom:2px solid #35495E;
    width: 50%;
}
#app_3 .text-success{
    color: #40b983;
  }
#app_3 .text-danger{
    color: #F1936E;
  }

Vue.js

▼「NinjaCODE 楽しい!!」を表示させたいとき

var app3 = new Vue({
    el: "#app_3",
    data: {
      show: true
    },
  });

▼「NinjaCODE 難しい…」を表示させたいとき

var app3 = new Vue({
    el: "#app_3",
    data: {
      show: false
    },
  });

まとめ

1. v-if="show"

Vue.jsのディレクティブで、showが**trueの場合に、その要素をDOMに追加**します。
falseの場合、その要素は完全にDOMから削除されます。

2. v-else

v-ifに対応する**「それ以外」**の条件を示します。
**showがfalse**の場合、このv-elseブロックが表示されます。