コツコツ学習ブログ

プログラマのweb上のメモ的なもの

制御関連のディレクティブ

Vue.js

あｎ# おさらい ディレクティブとは、接頭辞v- がついたVueJsの属性。 これを使うことでデータバインディングなどが可能となる。

v-if

指定された条件式がtrueの場合にだけ、現在の要素を出力する

v-show

式の真偽に応じて表示/非表示を切り替える 〜v-show

使い分け

表示と非表示を頻繁に切り替え->v-show 表示/非表示をあまり変更しない->v-if

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Vue.js</title>
  <link href="main.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <form>
      <!-- チェックボックスをshowに紐付け -->
      <label for="show">表示/非表示</label>
      <input type="checkbox" id="show" v-model="show" />
    </form>
    <!-- showプロパティの値に応じて、パネルの表示/非表示を切り替え -->
    <div id="panel" v-if="show">
      <h3>RSSフィードについて</h3>
      <div>WINGSでは、弊社執筆の書籍/雑誌/Web記事の...</div>
    </div>
    <div v-else>現在、非表示状態です</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="main.js"></script>
</body>

</html>

new Vue({
  el: '#app',
  data: {
    // パネルの表示状態を表すフラグ
    show: true
  }
});