javascript - v-for="n in 10" 怎麼實作排序，預設是1到10，從10到1怎麼實現？

Question

v-for="n in 10" 怎麼實作排序，預設是1到10，從10到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

雷雷

Answer 7

3種方法：1.採用filter過濾 2.計算屬性 3.methods事件 處理事件11-n比較簡單的