<!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>Document</title>
<script src="./vue2.6.14.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- v-for比v-if等级高 -->
<!-- <li v-if="item.isStudent" v-for="(item,index) in arr">{{'姓名：' + item.name}} {{'编号：'+item.id}} {{'年龄：'+item.age}}
</li>> -->
<li v-for="(item,index) in f">{{'姓名：' + item.name}} {{'编号：'+item.id}} {{'年龄：'+item.age}}
</li>
</ul>
</div>
<script>
// vue是数据驱动视图
let vm = new Vue({
el: "#app",
//computed 计算属性，用来把data中的数据进行处理
computed: {
f() {
return this.arr.filter(r => r.isStudent)
}
},
data: {
arr: [{
name: "Jack",
id: 'FBI898',
age: 30,
isStudent: false
}, {
name: "Mary",
id: 'FBI899',
age: 14,
isStudent: true
}, {
name: "Rose",
id: 'FBI900',
age: 26,
isStudent: false
}, {
name: "Lily",
id: 'FBI911',
age: 19,
isStudent: true
}]
},
methods: {
}
})
</script>
</body>
</html>
