Vue v-for
阿新 • • 發佈：2021-08-17
<!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>