1.数组filter（）方法和sort（）方法以及indexOf()方法的使用
1.filter（）方法
2.indexOf（）方法
3.sort（）方法
通过filter()方法来创建出一个新数组，在filte()方法的参数中定义一个函数，在这个函数里取调用indexOf()方法来给这个新创建的数组加一个限制条件，从而达到过滤数组的作用
2.在什么时候应该使用计算属性
当需要通过监视一个元素的属性改变而在页面做出相应的变化时，就应该用到监视属性或者计算属性。比如这里的搜索功能，需要通过监视input元素的内容的变化来筛选出相应的内容，所以就要用到计算属性。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
<div id="app">
<input type="text" v-model="newname">
<li v-for="(item,index) in newlist" :key="index">
{{index}}--{{item.name}}--{{item.age}}
<button @click="paixu(2)">按年龄升序
<button @click="paixu(1)">按年龄降序
<button @click="paixu(0)">按原本顺序
var vm =new Vue({
el:'#app',
data:{
orderType:0,
newname:'',
list:[
{name:'张三',age:'15'},
{name:'李三',age:'19'},
{name:'张一',age:'10'},
{name:'王三',age:'16'},
]
},
computed:{
newlist(){
//取出相关数据
const {newname,list,orderType}=this //结构赋值
let flist//最终需要显示的数组
flist= list.filter(p =>p.name.indexOf(newname)!==-1)
//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
//indexOf()方法来筛查出符合条件的元素，此处则表示p对象的name属性的值里面有没有newname的值
//比如newname的值是1，那就筛选出name属性的值里含有1的项
if (orderType!==0){//声明一个中间值来判断是升序还是降序
flist.sort(function (p1,p2) {
// 调用数组的sort方法，参数为一个函数，函数里放p1，p2两个参数
// 并用p1p2的age值做比较，如果返回的是正数则p2在前，如果返回的是负数
// 则p1在前
if (orderType===1){
return p2.age-p1.age
}else {
return p1.age-p2.age
}
})
}
return flist//返回数组要放在最后，把前面所有的改变都做完了，再返回一个最新的数组
}
},
methods:{
paixu(ordertype){
this.orderType = ordertype
}
}
})
</html>
