Vue.jsでリストの一部をレンダリングする方法
4240 ワード
※はてブとのマルチポストです
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>
サンプル表示
関連するマニュアルのURL
Author And Source
この問題について(Vue.jsでリストの一部をレンダリングする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/kunst1080/items/b6fbe0424b5f11a81221著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .