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