Vue.js if文

公式ドキュメントの条件分岐とループの項目で説明しているif文について記載します。

Vue.jsのif文は、htmlタグの属性にv-ifを指定することができ、

trueかfalseを見て、そのタグを有効にするかどうかをみています。

サンプルコード html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-if="seen">seenがTrueだと表示される</span>
    </div>
  </body>
</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

実行結果

実行結果(seen: falseに書き換えた場合)

解説

Vueインスタンスのdataには、文字列だけでなく真理値を指定することもできます。

  data: {
    seen: true
  }

そして、htmlタグの属性にv-ifを追加して、seenの値によって、

そのタグを有効にするかを決められます。

<span v-if="seen">seenがTrueだと表示される</span>

まとめ

v-if属性をhtmlタグの属性と指定し、その値によってタグを有効、無効化できる。