Vue.jsでリストの一部をレンダリングする
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>
サンプル表示