javascript - v-for="n in 10" 怎麼實作排序,預設是1到10,從10到1怎麼實現?
習慣沉默
習慣沉默 2017-05-19 10:25:39
0
7
705

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

習慣沉默
習慣沉默

全部回覆(7)
滿天的星座

想從10到1,直接11 - n不就行了嗎…
幹嘛這麼耿直…

巴扎黑

題主沒有寫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的管道

给我你的怀抱

那你需要自建一個陣列存放10~1

滿天的星座

可以用計算屬性,具體看【傳送門】,傳入js的排序方法sort,不懂sort看

【這裡】

Ty80

如果是vue裡面,還可以考慮用過濾器filters轉換

仅有的幸福

雷雷

小葫芦

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板