コツコツ学習ブログ

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

v-forを使ったループ処理

v-forとは

よくある「配列からデータを取り出してtableに表示して云々」を実現する。仮引数を2つ用意することで「配列要素、インデックス番号」の順にセットすることも可能。

配列を絞り込みたい時

配列をそのまま表示するでなく、ソートしたり条件に合致するものだけを表示させたい時など算出プロパティを使用する。

<!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">
    <table class="table">
      <th>No</th>
      <th>ISBN</th>
      <th>書名</th>
      <th>価格</th>
      <tr v-for="b in expensiveBooks">
        <td>{{i + 1}}</td>
        <td>{{b.isbn}}</td>
        <td>{{b.title}}</td>
        <td>{{b.price}}</td>
      </tr>
    </table>
  </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: {
    books: [
      {
        isbn: 'ssss',
        title: 'javaScript逆引きレシピ',
        price: 2900
      },
      {
        isbn: 'ssss',
        title: 'javaScript逆引きレシピ2',
        price: 3200
      },
      {
        isbn: 'ssss',
        title: 'javaScript逆引きレシピ3',
        price: 200
      }
    ]
  },
  computed: {
    expensiveBooks: function () {
      return this.books.filter(function (b) {
        return b.price >= 2500;
      })
    }
  }
});