javascript - Vue 在列表渲染的时候，能排序显示么。 比如按价格从大到小排序

Question

// json
{
    "data": [
        {
            "name": "山鹰登山社",
            "school": "北京大学",
            "count": "3298",
            "isA":false
        },
        {
            "name": "O2氧气动漫社",
            "school": "北京语言大学",
            "count": "1233",
            "isA":true
        },
        {
            "name": "么么哒社团",
            "school": "北京旅游大学",
            "count": "2098",
            "isA":true
        },
    ]
}

// html
<section id="app">
    <ul class="rank-list">            
        <li v-for=" item in data">
            <strong>{{$index + 1}}.</strong>
            <span class="name">{{item.name}}</span>
            <span class="school">{{item.school}}</span>
            <p class="heart" v-bind:class="{curr:item.isA}">
                <span class="count">{{item.count}}</span>
            </p>
        </li>
    </ul>
</section>

如上是一段json数据，在列表渲染的时候怎样按照count的大小排序显示呢

Answer 1

http://cn.vuejs.org/api/#orderBy

Answer 2

有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：

创建一个计算属性，返回过滤/排序过的数组；
使用内置的过滤器 filterBy 和 orderBy。
计算属性有更好的控制力，也更灵活，因为它是全功能 JavaScript。但是通常过滤器更方便，详细见
链接描述

Answer 3

http://vuejs.org/guide/list.html#track-by