javascript - v-for="n in 10" 怎样实现排序,默认是1到10,从10到1怎么实现?
習慣沉默
習慣沉默 2017-05-19 10:25:39
0
7
726

v-for="n in 10" 怎样实现排序,默认是1到10,从10到1怎么实现?

習慣沉默
習慣沉默

全部回复(7)
滿天的星座

想从10到1,直接11 - n不就行了吗……
干嘛这么耿直……

巴扎黑

题主没有写vue标签但是我看到了v-for指令.题主应该是问怎么用vue实现1-10倒序排列。
假设有如下一个vue组件


      var vm = new Vue({
            el: '#app',
            template: `
                    <ul>
                    <li v-for="item in arr">loop {{item}}</li>
                    </ul>
                   
                   `,
            
            filters: {
                
            },
            data() {
                return {
                    arr:10,
        
                }
        
            },
        
        })
        
        

1.采用filter

filters: {
        sort(v) {
            if (!v)
                return ''
            else {
                return 11 - v
            }
        },
        template:`<ul><li v-for="item in arr">{{item|sort}}</li></ul>`

2.采用vue方法

 template: `
            <ul>
            <li v-for="item in arr">{{reverseNumber(item)}}</li>
            </ul>
           
           `,
            methods: {
        reverseNumber(x) {
            return 11 - x
        },
        }

这样的循环一个数字是没有办法采用计算属性的,计算属性是data中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for是循环了列表的数据相当于一个迭代器,并没有改变数据data的某个属性值。


建议你循环一个数组或对象,不要直接循环数字。除非逻辑真的很简单,就是循环生成几个标签。把一个数组元素排序你还可以采用,sort()传入倒序排序函数,这样就可以用计算属性,先映射排序数组到计算属性,然后v-for循环倒序排列的计算属性。也可以实现倒序排列。

简单的情况下我推荐用过滤器,也就是angular的管道

给我你的怀抱

那你需要自建一个数组存放10~1

滿天的星座

可以用计算属性,具体看【传送门】,传入js的排序方法sort,不懂sort看

【这里】

Ty80

如果是vue里面,还可以考虑用过滤器filters转换

仅有的幸福

雷雷

小葫芦

3种方法:1.采用filter过滤 2.计算属性 3.methods事件 处理事件11-n比较简单的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板