プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

Vue.js 基礎編①(基礎・v-if・v-show)

■Vue.jsの基本的な文法(基礎・v-if・v-show)について解説する
 
・Vue.jsを使用する為のスクリプト(開発環境)


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

 
・Vue.jsを使用する為のスクリプト(本番環境)


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 
・Vue.jsに記述したデータを「name」変数で出力
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <!-- Vue.jsに記述した「data」の「name」で設定した値を出力(二重波かっこで括る) -->
      {{ name }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js">
    </script>
  </body>
</html>

 
【JavaScriptファイル】


(function() {
  'use strict';

  //ここからVue.jsの記述
  //Vueのインスタンスを作成
  let vm = new Vue({
    //「el」でVueを記述する箇所のエレメントを設定
    //今回は「result」という名称のid要素を設定
    el: '#result',
    //「data」にHTMLファイルに出力するデータを設定
    data: {
      name: 'tanaka'
    }
  });
})();

ブラウザで確認すると「tanaka」と表示される
 
・「v-model」ディレクティブでVue.jsと紐づけ
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <!-- 「v-model」でVue.jsの「data」で設定した「name」と紐づける -->
      <p><input type="text" v-model="name"></p>
      <!-- テキストボックスに入力した値をリアルタイムに表示 -->
      <p>{{ name }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js">
    </script>
  </body>
</html>

 
【JavaScriptファイル】


(function() {
  'use strict';

  //ここからVue.jsの記述
  //Vueのインスタンスを作成
  let vm = new Vue({
    //「el」にVueを記述する箇所のエレメントを設定
    //今回は「result」という名称のid要素を設定
    el: '#result',
    //「data」内の「name」にHTMLファイルに出力するデータを設定
    data: {
      name: ''
    }
  });
})();

 
【ブラウザの表示結果】

 
・条件分岐ディレクティブ(v-if・v-else-if・v-else)
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <!-- テキストボックスに入力した値を「myage」で紐づけ -->
      <input type="text" v-model="myage">
      <!-- 入力値が空の場合 -->
      <p v-if="myage == ''">No Input</p>
      <!-- 入力値が20以上の場合、「20歳以上です」と出力 ※今回はシンプルにする為に入力値は数字のみを想定 -->
      <p v-else-if="myage >= age20">{{ over20 }}</p>
      <!-- それ以外の場合、「20歳未満です」と出力 -->
      <p v-else>{{ under20 }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js">
    </script>
  </body>
</html>

 
【JavaScriptファイル】


(function() {
  'use strict';

  let vm = new Vue({
    el: '#result',
    data: {
      myage: '',
      age20: 20,
      over20: '20歳以上です',
      under20: '20歳未満です'
    }
  });
})();

 
入力値が空の場合

 
入力値が20以上の場合

 
それ以外の場合

 
・「v-show」ディレクティブで結果がtrueの場合に表示
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <!-- テキストボックスに入力した値を「myage」で紐づけ -->
      <input type="text" v-model="myage">
      <!-- 何か入力された場合 -->
      <p v-show="myage">入力されています</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js">
    </script>
  </body>
</html>

 
【JavaScriptファイル】


(function() {
  'use strict';

  let vm = new Vue({
    el: '#result',
    data: {
      myage: '',
    }
  });
})();

 
入力値が空の場合

 
何か入力された場合

 
次はループ処理やイベント処理について解説する→Vue.js 基礎編②(v-for・v-on・methods)