非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Vue.jpでデータを配列データに追加しリスト表示する方法

   

前回はVue.jpで、テキストボックスに文字をタイピングするたびに別の場所に文字が現れる方法を紹介しました。

今回は、テキストボックスに入力したデータを配列データに追加し、その配列データをリスト表示する方法を紹介します。

広告

まずは今回の完成形

今回の完成形の動きを動画でお見せします。

TitleとURLのテキストボックスに値を入力すると上のリストに追加されます。裏ではもともと存在する2つの配列データを持っていて、それに突っ込んだと同時に表示させるようになっています。

ソースコード

ソースコードはこちら。

最初は2つの配列データ(items)があって、まずはそれを表示させておいて、テキストボックスに入力してボタンを押すと、そのデータがitemsに追加されます。それと同時に表示も細心に更新されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue.js Demo</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items">
        {{ item.title }} - {{item.url}}
      </li>
    </ul>
    Title: <input v-model="addTitle"><br />
    URL: <input v-model="addURL"><br />
    <button v-on:click="add">add</button><br />
  </div>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var example1 = new Vue({
      el: '#app',
      data: {
        items: [
          { title: 'Google', url: 'http://www.yahoo.co.jp/' },
          { title: 'Yahoo!', url: 'https://www.google.co.jp/' }
        ],
        addURL : 'http://',
      },
 
      methods: {
        add: function (event) {
          this.items.push({ title: this.addTitle, url: this.addURL })
          this.addTitle = '';
          this.addURL = 'http://';
        }
      }
    })
  </script>
</body>
</html>
 

 

Vue.jsの特徴として、HTMLタグに<li v-for=”item in items”>と、v-forを使うと、配列の要素数だけループしてくれるという点です。

JavaScript側でループしない分、コードがシンプルになります。

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript