v-for="n in 10" 怎麼實作排序,預設是1到10,從10到1怎麼實現?
想從10到1,直接11 - n不就行了嗎… 幹嘛這麼耿直…
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的某個屬性值。
data
v-for
建議你循環一個陣列或對象,不要直接循環數字。除非邏輯真的很簡單,就是循環產生幾個標籤。把一個陣列元素排序你還可以採用,sort()傳入倒序排序函數,這樣就可以用計算屬性,先映射排序數組到計算屬性,然後v-for循環倒序排列的計算屬性。也可以實現倒序排列。
那你需要自建一個陣列存放10~1
可以用計算屬性,具體看【傳送門】,傳入js的排序方法sort,不懂sort看
【這裡】
如果是vue裡面,還可以考慮用過濾器filters轉換
雷雷
3種方法:1.採用filter過濾 2.計算屬性 3.methods事件 處理事件11-n比較簡單的
想從10到1,直接
11 - n
不就行了嗎…幹嘛這麼耿直…
題主沒有寫vue標籤但是我看到了v-for指令.題主應該是問怎麼用vue實現1-10倒序排列。
假設有如下一個vue組件
1.採用filter
2.採用vue方法
這樣的迴圈一個數字是沒有辦法採用計算屬性的,計算屬性是
data
中一个值改变后,把他映射到另外一个值相当于一个函数,而v-for
是循環了列表的資料相當於一個迭代器,並沒有改變資料data的某個屬性值。建議你循環一個陣列或對象,不要直接循環數字。除非邏輯真的很簡單,就是循環產生幾個標籤。把一個陣列元素排序你還可以採用,sort()傳入倒序排序函數,這樣就可以用計算屬性,先映射排序數組到計算屬性,然後
v-for
循環倒序排列的計算屬性。也可以實現倒序排列。簡單的情況下我推薦用過濾器,也就是angular的管道
那你需要自建一個陣列存放10~1
可以用計算屬性,具體看【傳送門】,傳入js的排序方法sort,不懂sort看
【這裡】
如果是vue裡面,還可以考慮用過濾器filters轉換
雷雷
3種方法:1.採用filter過濾 2.計算屬性 3.methods事件 處理事件11-n比較簡單的