vue学习笔记之：以对学生数据的处理作为示例实现数据过滤筛选等常规处理
程序员文章站
2024-03-21 11:39:46
...
示例：现有一组学生数据，通过对其中的数据筛选，获取其中的年龄最大、年龄最小、和年龄在指定区间内的学生数据
学生数据：
[{'name': '张三', 'sex': '男', 'age': 15},
{'name': '刘丽丽', 'sex': '女', 'age': 25},
{'name': '李艳', 'sex': '女', 'age': 17},
{'name': '王五', 'sex': '男', 'age': 35},
{'name': '刘刚', 'sex': '男', 'age': 17},
{'name': '李明明', 'sex': '男', 'age': 19}]示例一：获取年龄小于18岁的学生
使用filter过滤出年龄大于18的所有学生数据，然后在页面上通过v-for指令循环获取即可，代码如下：
followEighteen: function () {
// （1）列出所有小于18岁的同学的姓名和年龄
return this.students.filter(a => a.age < 18);
},<label-template :title="followEighteenTitle"></label-template>
<ul v-for="item in followEighteen">
<li :key="item.id">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>示例二：获取年龄最大和最小的学生信息
这个可以首先通过sort()方法对数组数据先进行排序，比如按照从小到大排序，然后页面上通过v-for指令循环时，最大的数据获取的是最后一个，最小的数据拿第一个即可，详细代码如下：
sortedAge: function () {
// 输出年龄最小的同学的姓名和年龄
return this.students.sort((a, b) => {
// 从小到大排序
return a.age - b.age
})
},<label-template :title="minAgeTitle"></label-template>
<ul v-for="(item,index) in sortedAge">
<li :key="item.id" v-if="index === 0">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>
<label-template :title="maxAgeTitle"></label-template>
<ul v-for="(item,index) in sortedAge">
<li :key="item.id" v-if="index === (sortedAge.length-1)">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据操作</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label-template :title="followEighteenTitle"></label-template>
<ul v-for="item in followEighteen">
<li :key="item.id">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>
<label-template :title="minAgeTitle"></label-template>
<ul v-for="(item,index) in sortedAge">
<li :key="item.id" v-if="index === 0">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>
<label-template :title="maxAgeTitle"></label-template>
<ul v-for="(item,index) in sortedAge">
<li :key="item.id" v-if="index === (sortedAge.length-1)">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>
<label-template :title="avgTitle"></label-template>
<count-template :num="avgAge" :input_disabled="inputDisabled"></count-template>
<br>
<label-template :title="familyLiTitle"></label-template>
<ul v-for="item in getFamilyLi">
<li :key="item.id">
<span>姓名是：{{item.name}}</span>
<span>性别是：{{item.sex}}</span>
<span>年龄是：{{item.age}}</span>
</li>
</ul>
<label-template :title="maleTitle"></label-template>
<count-template :num="maleNum" :input_disabled="inputDisabled"></count-template>
<br>
<label-template :title="femaleTitle"></label-template>
<count-template :num="femaleNum" :input_disabled="inputDisabled"></count-template>
<br>
<label-template :title="maleAvgAgeTitle"></label-template>
<count-template :num="maleAvgAge" :input_disabled="inputDisabled"></count-template>
<br>
<label-template :title="femaleAvgAgeTitle"></label-template>
<count-template :num="femaleAvgAge" :input_disabled="inputDisabled"></count-template>
<br>
</div>
</body>
<script>
// 定义一个组件：label头的
Vue.component('label-template', {
props: ['title'],
template: '<label>{{title}}</label>'
})
// 定义一个组件：统计人数的
Vue.component('count-template', {
props: ['num', 'input_disabled'],
template: '<input type="text" :value="num" :disabled="input_disabled"/>'
})
/**
* students = [{'name': '张三', '性别': '男', 'age': 15},
{'name': '刘丽丽', '性别': '女', 'age': 25},
{'name': '李艳', '性别': '女', 'age': 17},
{'name': '王五', '性别': '男', 'age': 35},
{'name': '刘刚', '性别': '男', 'age': 17},
{'name': '李明明', '性别': '男', 'age': 19}]
列表students保存着多个学生的信息，分别自定义7个函数完成如下的7个操作：（2）输出年龄最小的同学的姓名和年龄。（3）输出年龄最大的同学的姓名和年龄。
（4）计算出平均年龄。
（5）查询出所有姓李的同学。
（1）列出所有小于18岁的同学的姓名和年龄。（6）分别统计出男女人数。（7）分别统计出男女同学的平均年龄。
* */
let vm = new Vue({
el: '#app',
data: {
students: [
{
id: 1,
'name': '张三',
'sex': '男',
'age': 15
},
{
id: 2,
'name': '刘丽丽',
'sex': '女',
'age': 25
},
{
id: 3,
'name': '李艳',
'sex': '女',
'age': 17
},
{
id: 4,
'name': '王五',
'sex': '男',
'age': 35
},
{
id: 5,
'name': '刘刚',
'sex': '男',
'age': 17
},
{
id: 6,
'name': '李明明',
'sex': '男',
'age': 19
}
],
inputDisabled: true,
femaleTitle: '女生人数是：',
maleTitle: '男生人数是：',
avgTitle: '计算出平均年龄：',
familyLiTitle: '查询出所有姓李的同学：',
maxAgeTitle: '输出年龄最大的同学的姓名和年龄：',
minAgeTitle: '输出年龄最小的同学的姓名和年龄：',
followEighteenTitle: '列出所有小于18岁的同学的姓名和年龄：',
totalAge: 0,
maleAvgAgeTitle: '男生的平均年龄：',
maleTotalAge: 0,
femaleAvgAgeTitle: '女生的平均年龄：'
},
computed: {
followEighteen: function () {
// （1）列出所有小于18岁的同学的姓名和年龄
return this.students.filter(a => a.age < 18);
},
sortedAge: function () {
// 输出年龄最小的同学的姓名和年龄
return this.students.sort((a, b) => {
// 从小到大排序
return a.age - b.age
})
},
avgAge: function () {
// 计算出平均年龄
this.students.forEach(s => {
this.totalAge+=s.age
})
// 4舍5入取整
return Math.round(this.totalAge/this.students.length)
},
getFamilyLi: function () {
// 查询出所有姓李的同学
return this.students
.filter(s => s.name.indexOf('李') !== -1)
.filter(s => s.name.split('')[0] === '李')
},
maleNum: function () {
// 查询出男生人数
let totalNum = 0
this.students
.filter(s => s.sex === '男')
.forEach(s => {
totalNum+=1
})
return totalNum
},
femaleNum: function () {
// 查询出女生人数:总人数减去女生人数
return this.students.length - this.maleNum
},
maleAvgAge: function () {
// 分别统计出男女同学的平均年龄
this.students
.filter(s => s.sex === '男')
.forEach(s => {
this.maleTotalAge += s.age
})
return Math.round(this.maleTotalAge/this.maleNum)
},
femaleAvgAge: function () {
return Math.round((this.totalAge - this.maleTotalAge)/ (this.students.length-this.maleNum))
}
}
})
</script>
</html>