你知道？Vue.js里常见的做法就是对数据做筛选处理，这样就可以只展示满意条件的信息！在Vue组件里面，我们能用计算属性和方法实现这个小技巧喔。比如，我们先定好筛选规则，再配合一下filter方法就能很简单地搞定了。你看，像学生成绩排名、价格在哪个档次内这样的问题，用数据筛选功能就挺给力的。
学生成绩排名，其实就是比分数谁高谁低。先在data里设好有关同学名字和分数的students数组。用v-for把学生列表显示在下面就行了。接下来，在搜索框那儿用v-model把你想要的条件挂在filter属性那儿。然后在计算属性filteredStudents里用filter功能，按得分大于等于90分这个条件找出优等生，然后模板里就会显示这些同学了。
别担心，我们来教你如何轻松搞定这件事儿。首先，要明确价格范围，因为只有这样才能筛选出合适的商品。接着，在data属性里创建一个名为products的商品项目数组，包含产品的名字和价格。然后就是用v-for把所有商品展现到网页上。最后，当点击”按价格区间筛选”按钮时，只需利用filterByPriceRange这个小功能就可以按照用户选好的价格精确筛选出对应的商品！最后，将筛选后的结果展现在模板里就大功告成了。
具体代码示例：
javascript
//学生成绩排名示例
data(){
return {
students:[
{ name:'小明', score: 95 },
{ name:'小红', score: 88 },
{ name:'小刚', score: 78 },
],
filter: 90
};
- {{ student.name }}，{{ student.age }}岁
export default {
data() {
return {
students: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 },
{ id: 4, name: '赵六', age: 16 },
],
filter: '',
};
},
computed: {
filteredStudents() {
return this.students.filter((student) => {
return student.age >= 18;
});
},
},
};
},
computed:{
filteredStudents(){
直接告诉你，就是这个方法FilterOfScore，把我们要筛选的条件传入就对了。在这里，们只要把学生的分数大于等于我们给定的过滤条件（也就是filter）的学生挑出来就行了。
}
}
//商品价格区间选择示例
products:[
{ name:'商品A', price: 100 },
{ name:'商品B', price: 200 },
{ name:'商品C', price: 150 },
minPrice:0,
maxPrice: 200
methods:{
filterByPriceRange(){
只找价格上了线，又便宜的商品。
数据排序操作
除了找数据，搞排列也是Vue组件常干的活儿。就算给数据排个序，也能让你看得顺眼多了。用Vue组件，我们就能耍个小把戏——用sort这个方法来排序。方法就是，设定一个排序的条件，然后把它当作参数输入到sort里头去。就这么简单，就搞定了数据的按照特定顺序来排列。
- {{ product.name }}，{{ product.price }}元
export default {
data() {
return {
products: [
{ id: 1, name: '商品1', price: 100 },
{ id: 2, name: '商品2', price: 50 },
{ id: 3, name: '商品3', price: 200 },
{ id: 4, name: '商品4', price: 80 },
],
};
},
methods: {
sortAsc() {
this.products.sort((a, b) => {
return a.price - b.price;
});
},
},
computed: {
sortedProducts() {
return this.products;
},
},
};
比如说，咱们希望新闻页面按照更新的前后顺序显示出来，这就需要在data里设计一个包含新闻标题和发布时间的新闻数组。接下来通过v-for把新闻展示在网页上好了。然后，你想看新闻按发布时间怎么排？那就点”按发布时间排序”这个按钮！这时候，sortByPublishTime就会出来起作用，帮我们完成排序任务咯~在这个方法里面，我们设定了一个排序规则，就是按照新闻的发布时间从新的往后排列，最后再把排好序的新闻显示在网页上。
先得说，有个叫做“歌曲列表”的地方，我们得按歌曲名字给它排下序。就在data里弄个歌名的songs数组就好！接着用v-for把这些曲子都显示到屏幕上去。然后，如果你点一下那个“按照歌曲名字排序”的按钮，sortByName这个方法就能自动把歌单按字母顺序搞好了。这个方法里面，我们设了个叫做”orderByTitle”的函数来搞定这个排序的事情，然后把排好序的歌单再显示回去给大家看。
//新闻发布时间排序示例
news:[
新闻A，发布时间是2022年1月1号！
标题：新闻B，发表时间：2022 年 2 月 1 日
新闻C，2022年3月1日发布。
sortByPublishTime(){
把新闻按发布时间排个序，就用新日期（就是b的）减去旧日子（就是a的）这个方法。
//音乐歌曲名称排序示例
songs:[‘歌曲C’,’歌曲A’,’歌曲B’]
sortByName(){
this.songs.sort();
总结与展望
这篇文章教你怎么用Vue组件处理数据的挑选和排序，而且还有例子给你看！用好计算属性和方法在各种情况都能满足数据处理的需要。
你别忘了，处理大数据时要注意速度！免得老去调用计算函数搞慢了网页性能。还有，编程的时候，把思路弄清爽点，语句写简单明了点儿，这样以后修改代码也方便些！
以后前端技术越来越牛了，Vue.js也会跟着变强，给大家提供好用、省事的工具、功能，让你们能搞出更棒的应用！
评论0