<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性实施</title>
</head>
<body>
<div id="app">
<label for="firstName">姓名：</label>
<input id="firstName" placeholder="请输入关键字" v-model="firstName" >
<table border="1" width="300px">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(i,index) in filterstudent" :key="i.id">
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.Age}}</td>
</tr>
</table>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
student:[
{id:1,name:"你好啊",Age:22},
{id:2,name:"小子",Age:16},
{id:3,name:"普通人",Age:30},
{id:4,name:"弱者",Age:40},
],
//监听到input里的值，给他初始值
firstName:""
},
computed:{
//监听到新的数组
filterstudent(){
//为了能得到student，firstName，重新赋值
var student=this.student;
var firstName=this.firstName;
//过滤我们需要得到的数据，i代表的是每一条对象
var result=student.filter(function (i){
//indexof 存在返回的是1，不存在返回的是-1
if(i.name.indexOf(firstName)!==-1){
return i;
}
})
return result;
}
}
})
</script>
</body>
</html>
