<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="p in personArr">{{p}}</li>
</ul>
<p>-------------------------</p>
<ul>
<li v-for="(p,index) in personArr">{{index}}--{{p}}</li>
</ul>
<p>-------------------------</p>
<ul>
<li v-for="(p,index) in persons">{{index}}--{{p.name}}-{{p.age}}</li>
</ul>
<p>-------------------------</p>
<table border="1">
<tr v-for="(person,index) in persons">
<td>{{index}}</td>
<td v-for="(item,key) in person">{{key}}:{{item}}</td>
</tr>
</table>
<p>-------------------------</p>
<table border="1">
<tr v-for="person in persons">
<td v-for="(item,key,index) in person">{{index}}--{{key}}:{{item}}</td>
</tr>
</table>
<p>-------------------------</p>
<label>name<input type="text" placeholder="name" v-model="searchStr"></label>
<button @click="setOrderType('age asc')">age asc</button>
<button @click="setOrderType('age desc')">age desc</button>
<button @click="setOrderType('default')">default</button>
<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(person,index) in filterPersons">
<td>{{index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
searchStr: '',
orderType: 'default',
personArr:['张三','李四','王五'],
persons:[
{name:'张三',age:20,friends:['李四','王五']},
{name:'李四',age:24,friends:['张三','王五']},
{name:'王五',age:28,friends:['李四','张三']}
]
}
},
computed:{
filterPersons(){
const {persons,searchStr,orderType} = this;
let arr = [...persons];
if(searchStr.trim()){
arr=persons.filter((p)=>{
return p.name.indexOf(searchStr) !== -1;
});
}
if(orderType){
arr.sort((p1,p2)=>{
if(orderType==='age asc'){
return p1.age-p2.age;
}else if(orderType==='age desc'){
return p2.age-p1.age;
}
})
}
return arr;
}
},
methods:{
setOrderType(orderType){
this.orderType=orderType;
}
}
}).mount('#app');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="p in personArr">{{p}}</li>
</ul>
<p>-------------------------</p>
<ul>
<li v-for="(p,index) in personArr">{{index}}--{{p}}</li>
</ul>
<p>-------------------------</p>
<ul>
<li v-for="(p,index) in persons">{{index}}--{{p.name}}-{{p.age}}</li>
</ul>
<p>-------------------------</p>
<table border="1">
<tr v-for="(person,index) in persons">
<td>{{index}}</td>
<td v-for="(item,key) in person">{{key}}:{{item}}</td>
</tr>
</table>
<p>-------------------------</p>
<table border="1">
<tr v-for="person in persons">
<td v-for="(item,key,index) in person">{{index}}--{{key}}:{{item}}</td>
</tr>
</table>
<p>-------------------------</p>
<label>name<input type="text" placeholder="name" v-model="searchStr"></label>
<label>id<input type="text" placeholder="id" v-model="id"></label>
<button @click="add">add</button>
<button @click="setOrderType('age asc')">age asc</button>
<button @click="setOrderType('age desc')">age desc</button>
<button @click="setOrderType('default')">default</button>
<table border="1">
<tr>
<th></th>
<th>序号</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(person,index) in filterPersons" :key="person.id">
<td><input type="checkbox"></td>
<td>{{index+1}}
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
id:'',
searchStr: '',
orderType: 'default',
personArr:['张三','李四','王五'],
persons:[
{id:1,name:'张三',age:20,friends:['李四','王五']},
{id:2,name:'李四',age:24,friends:['张三','王五']},
{id:3,name:'王五',age:28,friends:['李四','张三']}
]
}
},
computed:{
filterPersons(){
const {persons,searchStr,orderType} = this;
let arr = [...persons];
// if(searchStr.trim()){
// arr=persons.filter((p)=>{
// return p.name.indexOf(searchStr) !== -1;
// });
// }
if(orderType){
arr.sort((p1,p2)=>{
if(orderType==='age asc'){
return p1.age-p2.age;
}else if(orderType==='age desc'){
return p2.age-p1.age;
}
})
}
return arr;
}
},
methods:{
setOrderType(orderType){
this.orderType=orderType;
},
add(index){
//尾部追加
// this.persons.push({id:this.id,name:this.searchStr,age:'30',friends:[]}
//头部追加
// this.persons.unshift({id:this.id,name:this.searchStr,age:'30',friends:[]});
//中间追加
// this.persons.splice(index,0,{id:this.id,name:this.searchStr,age:'30',friends:[]})
this.persons.splice(2,0,{id:this.id,name:this.searchStr,age:'30',friends:[]})
}
}
}).mount('#app');
</script>
</body>
</html>
