javascript - Wie implementiert man die Sortierung v-for="n in 10", der Standardwert ist 1 bis 10, wie implementiert man die Sortierung von 10 bis 1?

Question

v-for="n in 10" Wie implementiert man die Sortierung? Der Standardwert ist 1 bis 10. Wie implementiert man die Sortierung von 10 bis 1?

Answer 1

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

Answer 2

题主没有写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的管道

Answer 3

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

Answer 4

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

【这里】

Answer 5

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

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种方法：1.采用filter过滤 2.计算属性 3.methods事件 处理事件11-n比较简单的