v-for | limitBy,filterBy,orderBy

Vue 1.0 可用

测试数据

data() {
    return {
      search: '控件',
      scopeList: [
        { label: "仅当前控件", value: 9 },
        { label: "部分控件", value: 2 },
        { label: "全部", value: 3 },
        { label: "仅当前控件1", value: 4 },
        { label: "部分控件1", value: 5 },
        { label: "全部1", value: 6 }
        ]
    }
}

limitBy

渲染列表前3个元素

<div v-for="item in scopeList | limitBy 3">{{item.label}}</div>

效果：

从下标为1的元素开始渲染2个

<div v-for="item in scopeList | limitBy 2 1">{{item.label}}</div>

效果：

filterBy

过滤出包含search的元素。

<div v-for="item in scopeList | filterBy search">{{item.label}}</div>

orderBy

依照item.value进行倒序

<div v-for="item in scopeList | orderBy 'value' -1">{{item.label}}-{{item.value}}</div>

复杂的排序逻辑也可以使用function, 用法类似Array.sort

<div v-for="item in scopeList | sort 'value' -1">{{item.label}}</div>

methods: {
    sort: (a, b) => a.value-b.value
}