More than 5 years have passed since last update.

Vue.jsでリストの一部をレンダリングする方法

Posted at 2017-03-20

※はてブとのマルチポストです

vue.jsのv-forでアイテムのリストを描画する際v-for="item in items"でループを書くと思いますが、このitemsをsliceしてやることでリストの一部だけを描画することができるようです。

※やってみたらできた;)

サンプルコード

<html><body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>

<div id="sample">

  <h4>List1</h4>
  <ul>
    <li v-for="item in items.slice(0,2)">
      item = {{item}}
    </li>
  </ul>

  <h4>List2</h4>
  <ul>
    <li v-for="item in items.slice(2,4)">
      item = {{item}}
    </li>
  </ul>

  <h4>List3</h4>
  <ul>
    <li v-for="item in items.slice(4,6)">
      item = {{item}}
    </li>
  </ul>

</div>

<script>
var vm = new Vue({
    el: "#sample",
    data: {
        items: ["a", "b", "c"]
    }
});

// 要素を追加すると、sliceで割り当てられた部分に描画される
vm.items.push("d");
vm.items.push("e");
vm.items.push("f");

</script>

</body></html>

Vue.jsでリストの一部をレンダリングする方法

サンプルコード

サンプル表示

関連するマニュアルのURL