javascript - How to implement v-for="n in 10" sorting, the default is 1 to 10, how to implement from 10 to 1?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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】

Answer 5

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

Answer 6

<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就可以呢？

Answer 7

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