<!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>