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

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

Vue.js 基礎編②(v-for・v-on・methods)

■Vue.jsの基本的な文法(v-for・v-on・methods)について解説する
基礎や条件分岐処理はこちら→Vue.js 基礎編①(基礎・v-if・v-show)
 
・「v-for」でループ設定
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <h1>Vue.jsの文法</h1>
      <ul>
        <!-- 「v-for」で「newItem」内の配列をひとつずつ「item」に入れてループ ※Javaの拡張for構文のようなもの -->
        <li v-for="item in newItem">
          <!-- 「item」を出力 -->
          {{ item }}
        </li>
      </ul>
    </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」内の「newItem」に配列でデータを設定
    data: {
      newItem: ['memo_1', 'memo_2', 'memo_3']
    }
  });
})();

 
ブラウザで結果を確認

 
・「追加」ボタンを押下するとテキストボックスに入力した値が追加されるイベント設定
【HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
  </head>
  <body>
    <div id="result">
      <h1>Vue.jsの文法</h1>
      <!-- 追加ボタンを押した時にイベント設定 -->
      <!-- <form v-on:submit.prevent="addItem"> -->
      <!-- 「v-on:」は「@」で代用可能 -->
      <form @submit.prevent="addItem">
        <!-- 入力した値を「newItem」で紐づけ -->
        <input type="text" v-model="newItem">
        <input type="submit" value="追加">
      </form>
      <ul>
        <li v-for="item in items">
          {{ item }}
        </li>
      </ul>
    </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: {
      //入力ボックスに入力した値「newItem」に設定
      newItem: '',
      //入力した値「newItem」を追加する箱となる「items」を設定
      items:[]
    },
    //メソッド設定
    methods: {
      //追加ボタンを押した時にイベントを「addItem」で設定
      addItem: function(){
        //「items」に「newItem」を追加
        this.items.push(this.newItem);
        //テキストボックスを初期化
        this.newItem = '';
      }
    }
  });
})();

 
テキストボックスに入力して追加ボタンを押下

 

 
更にテキストボックスに入力して追加ボタンを押下

 

 
次は「v-bind(クラスの追加)」や「computed(算出プロパティ)」について解説する→Vue.js 基礎編③(v-bind・computed)