vue orderBy按数值大小排序

需求:Vue 在列表渲染的时候,能排序显示么。 比如按价格从大到小排序

问题原文地址:https://segmentfault.com/q/1010000004988322/a-1020000004988411

如果按照用下面的写法,结果是按string类型进行排序的,会出现1、11、2、3、4这样的如果,显然后面加个-1,则排序为4、3、2、11、1

// 定义vue范围及监听的变量
var demo = new Vue({
    el: '#demo',
    data: {
        aaa: [{name: "山鹰登山社1",count: "1"},{name: "山鹰登山社11",count: "11"},{name: "山鹰登山社2",count: "2"},{name: "山鹰登山社3",count: "3"}]
    }
})
// html
<section id="demo">
    <ul>            
        <li v-for="item in aaa | orderBy 'count' -1">
            ...
        </li>
    </ul>
</section>

要显示为1、2、3、4、11,建议用orderBy function

// 定义vue范围及监听的变量
var demo = new Vue({
    el: '#demo',
    data: {
        aaa: [{name: "山鹰登山社1",count: "1"},{name: "山鹰登山社11",count: "11"},{name: "山鹰登山社2",count: "2"},{name: "山鹰登山社3",count: "3"}]
    },
    methods: {
        numSort: function (a,b) {
            return a.count-b.count;
        }
    }
})
// html
<section id="demo">
    <ul>            
        <li v-for="item in aaa | orderBy numSort">
            ...
        </li>
    </ul>
</section>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,787评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,459评论 0 29
  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 14,007评论 1 159
  • 来源:http://www.cnblogs.com/opendigg/p/6513510.html UI组件 el...
    YU_XI阅读 7,851评论 0 26
  • nginx安装:三个路径:brew search nginx brew install nginx 安装完以后,可...
    sunny_王阅读 2,463评论 0 0