摘要:前言最近在看的教學視頻,正好學到的數(shù)組對象排序方法,在這跟大家分享一下,如有不足之處,請賜教。結果整個項目文件實例數(shù)組對象排序結果希望這篇文章對新手有用,也希望你們能和我一起分享知識,一起成長。
前言
最近在看vue的教學視頻,正好學到的數(shù)組對象排序方法,在這跟大家分享一下,如有不足之處,請賜教。
普通數(shù)組的排序
先看代碼:
v-for實例
- {{number}}
后來我想了一下,發(fā)現(xiàn)了其中的問題,sort方法會調用每個數(shù)組項的toString()方法,得到字符串,然后再對得到的字符串進行排序。sort()方法的參數(shù)就起到了作用,我們把這個參數(shù)叫做比較函數(shù)。
解決辦法
加一個比較函數(shù)function sortNumbers(a,b){ return a-b; }咦,怎么結果還是沒出來??原來我是輸出的時候忘記吧numbers換成sortNumbers。這是從小到大輸出,那么從大到小呢?很簡單就是return b-a,
結果如圖所示:
完整代碼如下:v-for v-for實例
- {{number}}
數(shù)組對象的排序
如果數(shù)組項是對象,我們需要根據(jù)數(shù)組項的某個屬性對數(shù)組進行排序,要怎么辦呢?其實和前面的比較函數(shù)也差不多。所以我就只把部分代碼分享出來了。
如何對這個數(shù)組進行age排序呢students:[ {name:"cjk",age:"38"} , { name:"xxf",age:"29"}, {name:"zk",age:"26"}, ]比較函數(shù):
function sortByKey(array,key){ return array.sort(function(a,b){ var x = a[key]; var y = b[key]; return((xy)?1:0)); }) } 這里我是用條件操作符來判斷的,也和下面這個代碼效果一樣
var compare = function (prop) { return function (obj1, obj2) { var val1 = obj1[prop]; var val2 = obj2[prop];if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } }我覺得這個代碼有點冗雜,所以我就用了條件操作符來判斷輸出。
結果:整個項目文件:
v-for v-for實例
- {{number}}
- {{index+1}}:{{student.name}}-{{student.age}}
結果:
希望這篇文章對新手有用,也希望你們能和我一起分享知識,一起成長。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95539.html
摘要:取到里面的偶數(shù)位的值在計算屬性不適用的情況下例如,在嵌套循環(huán)中你可以使用一個方法一段取值范圍的也可以取整數(shù)。 列表渲染 v-for v-for可以把數(shù)據(jù)中的一個數(shù)組對應為一組元素v-for 指令需要以 item in items 形式的特殊語法, items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。 {{item.text}} data:{ items:[ ...
摘要:用函數(shù)化組件展示一個根據(jù)數(shù)據(jù)智能選擇不同組件的場景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個場景程序化地在多個組件中選擇一個。 學習筆記:函數(shù)化組件 函數(shù)化組件 Vue提供了一個functional的布爾值選項,設置為true可以使組件無狀態(tài)和無實例,也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點可以更容易渲染,因為函數(shù)化...
摘要:用函數(shù)化組件展示一個根據(jù)數(shù)據(jù)智能選擇不同組件的場景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個場景程序化地在多個組件中選擇一個。 函數(shù)化組件 Vue提供了一個functional的布爾值選項,設置為true可以使組件無狀態(tài)和無實例,也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點可以更容易渲染,因為函數(shù)化組件只是一個函數(shù),渲染開...
摘要:如果一次判斷的是多個元素,可以在內置的元素上使用條件指令,最終渲染的結果不會包含該元素。列表渲染也支持用代替作為分隔符,它更接近迭代器的語法的表達式支持一個可選參數(shù)作為當前項的索引。分隔符前的語句使用括號,第二項就是當前項的索引。 學習筆記:內置指令 內置指令 基本指令 v-cloak v-cloak不需要表達式,它會在Vue實例結束編譯時從綁定的HTML元素上移除,經常和CSS的d...
摘要:條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時候,我們需要將它添加到這個元素上去。最終的渲染結果不會包含元素。渲染如下列表渲染使用把一個數(shù)組對應為一組元素我們用指令根據(jù)一組數(shù)組的選項列表進行渲染。 條件渲染 上一篇:Class 與 Style 綁定:https://segmentfault.com/a/11...下一篇:Vue的事件處理方法:https:/...
閱讀 3024·2021-09-22 15:52
閱讀 2903·2019-08-30 15:55
閱讀 2700·2019-08-30 15:53
閱讀 2454·2019-08-30 13:21
閱讀 1621·2019-08-30 13:10
閱讀 2481·2019-08-26 12:09
閱讀 2564·2019-08-26 10:33
閱讀 1802·2019-08-23 18:06