一.语法
1.过滤
即按关键词过滤出所需数据，这里用到了filter和indexOf方法
filter() 方法
定义：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
用法：array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr)：必须。函数，数组中的每个元素都会执行这个函数
currentValue：必须。当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
注意：filter() 方法不会改变原数组，不会对空数组进行检测
indexOf() 方法
定义：可返回某个指定的字符串值在字符串中首次出现的位置。
用法：stringObject.indexOf(searchvalue,fromindex)
searchvalue：必需。规定需检索的字符串值。
fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
注意：indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
这里是按用户名过滤的，绑定的字符串值是searchName，indexOf方法返回用户名出现的位置，
然后filter方法创建符合用户名的新数组
2.排序
按所需条件进行排序，不改变列表数据，这里用到了sort() 方法
定义：sort() 方法用于对数组的元素进行排序。
用法：arrayObject.sort(sortby)
sortby：可选。规定排序顺序。必须是函数。
这里是按年龄大小排序的，默认orderType=0，orderType=1或2对应升序降序，点击按钮时传orderType的值再进行判断。匿名一个比较函数设置参数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>
三.效果
初始页面
按用户名搜索
升序
降序
网友评论