一、数据筛选
你瞧见了吗？咱用 Vue翻数据拿刷子般的速度！这秘诀就是两个厉害的工具——虚拟属性算术器和过滤器。
1. computed属性筛选
Vue里面的computeds属性好像个小帮手！只要你给它点数据，它就能给你计算出另一些新东西。还有那个Array的filter方法也超厉害，无论什么数据，统统帮你搞定筛选。想想看，假如我们有份同学名单，里面有他们的名字和分数，那么想找出分数超过80的人简直就是小菜一碟~来看看我这简明扼要的代码吧：
javascript
想一想你在学校里的经历，班级里总有一些人的名字和他们的成绩单？
computed:{
filteredStudents(){
等于找成绩大于80的学生，直接把结果返回。
}
}
学生列表
-
{{ student.name }} - {{ student.score }}
export default {
data() {
return {
students: [
{ id: 1, name: '张三', score: 78 },
{ id: 2, name: '李四', score: 89 },
{ id: 3, name: '王五', score: 67 },
{ id: 4, name: '赵六', score: 92 }
]
};
},
computed: {
filteredStudents() {
return this.students.filter(student => student.score > 80);
}
}
};
这小程序牛逼！快速找到所有分数过80的同学，立马显示出来超好用！以后再找特别的信息，这下不怕麻烦了！
2.过滤器筛选
来告诉大家个小秘密，Vue还有个特别牛逼的功能叫过滤器，可以美化数据，还能用得上数组的filter方法。比如说想找到”张”字开头的同学？不难，做个filterName过滤器就搞定。要是害怕不会写的话可别怕，动手试试看。
//定义名为filterName的过滤器
filters:{
filterName(value){
return value.startsWith(‘张’);
学生列表
-
{{ student.name }} - {{ student.score }}
export default {
data() {
return {
students: [
{ id: 1, name: '张三', score: 78 },
{ id: 2, name: '李四', score: 89 },
{ id: 3, name: '王五', score: 67 },
{ id: 4, name: '赵六', score: 92 }
]
};
},
filters: {
filterName: function(value) {
return value.startsWith('张');
}
}
};
只要用v-show指令就行~能找出所有叫”张”的同学噢；还有滤镜以及filter方法，操作超简单，想选啥数据都行！
二、数据排序
说起数据整理，排好序才是硬道理，看着顺眼，使用起来也方便。怎么给数据搞好排序？用咱老百姓都懂的方式来说明，那就用Vue里那个array的sort功能不就搞定了吗？
1.使用sort方法进行排序
咱们排个成绩排行榜！不费事的，真跟挪鼠标似的，轻松！写代码，就是这么回事儿：
methods:{
sortByScore(){
直接按成绩排个队，从低到高，这是最公平的方法。
点这个“按成绩排序”就能看让成绩高到低来排列的人，方便多了？
学生列表
-
{{ student.name }} - {{ student.score }}
export default {
data() {
return {
students: [
{ id: 1, name: '张三', score: 78 },
{ id: 2, name: '李四', score: 89 },
{ id: 3, name: '王五', score: 67 },
{ id: 4, name: '赵六', score: 92 }
]
};
},
methods: {
sortStudents() {
this.students.sort((a, b) => b.score - a.score);
}
}
};
总结
让我告诉你，在Vue里对数据进行筛选排序就像喝茶一样容易！只要掌握以下三招，你也可以得心应手。靠的是高效利器——计算属性（computed properties）、过滤器（filters）和排序方法（sort method）。看完这文章，尝试用起来，绝对让你如虎添翼！
你有没有遇到过选错数据或排序搞砸了这种让人抓狂的时刻呢?那么，你们又是如何避免出现这些问题的？
评论0