javascript - How to implement v-for="n in 10" sorting, the default is 1 to 10, how to implement from 10 to 1?
習慣沉默
習慣沉默 2017-05-19 10:25:39
0
7
728

v-for="n in 10" How to implement sorting? The default is 1 to 10. How to implement sorting from 10 to 1?

習慣沉默
習慣沉默

reply all(7)
滿天的星座

If you want to go from 10 to 1, wouldn’t it be enough to just 11 - n...
Why are you so upright...

巴扎黑

The questioner did not write the vue tag, but I saw the v-for instruction. The questioner should be asking how to use vue to arrange 1-10 in reverse order.
Suppose there is the following vue component


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

1.Use filter

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

2.Using vue method

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

There is no way to use calculated attributes to loop through a number like this. The calculated attribute is data中一个值改变后,把他映射到另外一个值相当于一个函数,而v-forwhich is equivalent to an iterator after looping through the list data, and does not change a certain attribute value of the data.


It is recommended that you loop an array or object instead of looping numbers directly. Unless the logic is really simple, it just generates several tags in a loop. To sort an array elements, you can also use sort() to pass in the reverse order function, so that you can use calculated properties. First map the sorted array to the calculated properties, and then loop through the calculated properties in reverse order. Reverse order can also be implemented. v-for

In simple cases, I recommend using filters, which are Angular pipelines

给我你的怀抱

Then you need to build an array to store 10~1

滿天的星座

You can use calculated attributes, see [Portal] for details, pass in the js sorting method sort, if you don’t understand sort, check it out

【Here】

Ty80

If it is in vue, you can also consider using filters to convert

仅有的幸福
<select>
    <option v-for="n in 21" :value="22-n">{{22-n}}</option>
</select>

<select>
    <option v-for="n in 21" :id="22-n">{{22-n}}</option>
</select>
这两段,为什么上面这个value值就没有用,而id就可以呢?
小葫芦

3 methods: 1. Use filter 2. Calculate attributes 3. Methods event Processing event 11-n is relatively simple

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template