search

Home  >  Q&A  >  body text

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

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

習慣沉默習慣沉默2832 days ago760

reply all(7)I'll reply

  • 滿天的星座

    滿天的星座2017-05-19 10:27:39

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

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:27:39

    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

    reply
    0

  • 给我你的怀抱

    给我你的怀抱2017-05-19 10:27:39

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

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:27:39

    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】

    reply
    0
  • PHP中文网

    PHP中文网2017-05-19 10:27:39

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

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:27:39

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

    reply
    0
  • 高洛峰

    高洛峰2017-05-19 10:27:39

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

    reply
    0
  • Cancelreply