一.語法
1.過濾
即按關鍵詞過濾出所需數(shù)據(jù)，這里用到了filter和indexOf方法
filter() 方法
定義：創(chuàng)建一個新的數(shù)組望忆，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素乖订。
用法：array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr)：必須肛根。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)
currentValue：必須俄烁。當前元素的值
index：可選。當前元素的索引值
arr：可選海诲。當前元素屬于的數(shù)組對象
thisValue：可選繁莹。對象作為該執(zhí)行回調時使用，傳遞給函數(shù)特幔，用作 "this" 的值咨演。如果省略了 thisValue ，"this" 的值為 "undefined"
注意：filter() 方法不會改變原數(shù)組蚯斯，不會對空數(shù)組進行檢測
indexOf() 方法
定義：可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置薄风。
用法：stringObject.indexOf(searchvalue,fromindex)
searchvalue：必需。規(guī)定需檢索的字符串值拍嵌。
fromindex：可選的整數(shù)參數(shù)遭赂。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1横辆。如省略該參數(shù)撇他，則將從字符串的首字符開始檢索。
注意：indexOf() 方法對大小寫敏感狈蚤！如果要檢索的字符串值沒有出現(xiàn)困肩，則該方法返回 -1。
這里是按用戶名過濾的脆侮，綁定的字符串值是searchName锌畸，indexOf方法返回用戶名出現(xiàn)的位置，
然后filter方法創(chuàng)建符合用戶名的新數(shù)組
2.排序
按所需條件進行排序靖避，不改變列表數(shù)據(jù)潭枣，這里用到了sort() 方法
定義：sort() 方法用于對數(shù)組的元素進行排序。
用法：arrayObject.sort(sortby)
sortby：可選幻捏。規(guī)定排序順序盆犁。必須是函數(shù)。
這里是按年齡大小排序的粘咖，默認orderType=0蚣抗，orderType=1或2對應升序降序侈百，點擊按鈕時傳orderType的值再進行判斷瓮下。匿名一個比較函數(shù)設置參數(shù)p1，p2钝域，升序的話返回的是小于0的值讽坏，降序返回的是大于0的值
二.代碼
<!DOCTYPE html>
<head>
<title>列表過濾和排序</title>
https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<ul>
{{index}}--{{p.name}}--{{p.age}}</li>
</ul>
年齡升序</button>
年齡降序</button>
原本順序</button>
</div>
</body>
? ? new Vue({
? ? ? ? el: '#demo', data: {
? ? ? ? ? ? orderType: 0, //0 代 表 不 排 序 , 1 為 升 序 , 2 為 降 序
? ? ? ? ? ? searchName: '',
? ? ? ? ? ? persons: [{id: 1, name: 'Tom', age: 13},
? ? ? ? ? ? ? ? {id: 2, name: 'Jack', age: 12},
? ? ? ? ? ? ? ? {id: 3, name: 'Bob', age: 17},
? ? ? ? ? ? ? ? {id: 4, name: 'Cat', age: 14},
? ? ? ? ? ? ? ? {id: 4, name: 'Mike', age: 14},
? ? ? ? ? ? ? ? {id: 4, name: 'Monica', age: 16}]
? ? ? ? }, methods: {
? ? ? ? ? ? setOrderType(orderType) {
? ? ? ? ? ? ? ? this.orderType = orderType
? ? ? ? ? ? }
? ? ? ? }, computed: {
? ? ? ? ? ? filterPerson() {
? ? ? ? ? ? ? ? let {orderType, searchName, persons} = this
? ? ? ? ? ? ? ? // 過 濾
? ? ? ? ? ? ? ? persons = persons.filter(p => p.name.indexOf(searchName) != -1)
? ? ? ? ? ? ? ? //排 序
? ? ? ? ? ? ? ? if (orderType !== 0) {
? ? ? ? ? ? ? ? ? ? persons = persons.sort(function (p1, p2) {
? ? ? ? ? ? ? ? ? ? ? ? if (orderType === 1) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return p1.age - p2.age
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return p2.age - p1.age
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return persons
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</html>
三.效果
