<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>总人数{{totalCount}}</h1>
<ul>
<li v-for='item in maleList'>
{{item.name}}----{{item.gender|fmtGender}}----{{item.birthday|fmtBirthday}}
</li>
</ul>
<hr>
<ul>
<li v-for='item in femaleList'>
{{item.name}}----{{item.gender|fmtGender}}----{{item.birthday|fmtBirthday}}
</li>
</ul>
</div>
<!-- <script src="Simba.js"></script> -->
<Script>
let vm=new Vue({
el:"#app",
computed: {
maleList(){
return this.list.filter(r=>r.gender===0)
},
femaleList(){
return this.list.filter(r=>r.gender===1)
},
totalCount(){
return this.list.length
}
},
filters:{
fmtGender(val){
return['男','女'][val]
},
fmtBirthday(val){
let y=val.getFullYear()
let m=val.getMonth()+1
let d=val.getDate()
return [y,m,d].join('-')
}
},
data() {
return {
list:[
{
id:1,
name:"simba",
gender:0,
birthday:new Date(1999,9,9,0,0,0)
},
{
id:2,
name:"ace",
gender:1,
birthday:new Date(1999,9,9,0,0,0)
},
{
id:3,
name:"Negro",
gender:0,
birthday:new Date(1999,9,9,0,0,0)
},
{
id:4,
name:"Alice",
gender:1,
birthday:new Date(1999,9,9,0,0,0)
},
]
}
},
})
</Script>
</body>
</html>
