12.列表渲染

 <div id="root">
    <!-- 遍历数组 -->
    <h1>人员列表（遍历数组）</h1>
    <ul>
        <!-- (p,index) in persons -- :key="index" -->
        <li v-for="p of persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

    <!-- 遍历对象 -->
    <h1>汽车信息（遍历对象）</h1>
    <ul>
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>

    <!-- 遍历字符串 -->
    <h1>测试遍历字符串（用的少）</h1>
    <ul>
        <li v-for="(char,index) of str" :key="index">
            {{index}}-{{char}}
        </li>
    </ul>

    <!-- 遍历指定次数 -->
    <h1>测试遍历指定次数（用的少）</h1>
    <ul>
        <li v-for="(number,index) of 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'world',
            persons: [
                { id: '001', name: '张三', age: '18' },
                { id: '002', name: '李四', age: '19' },
                { id: '003', name: '王五', age: '20' }

            ],
            car: {
                name: '奥迪A8',
                price: '70万',
                color: '黑色'
            },
            str: 'hello',

        }
    })
</script>

 <div id="root">
    <!-- 遍历数组 -->
    <h1>人员列表（遍历数组）</h1>
    <button @click.once="add">加一个老刘</button>
    <ul>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}-{{p.age}}
            <input type="text">
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'world',
            persons: [
                { id: '001', name: '张三', age: '18' },
                { id: '002', name: '李四', age: '19' },
                { id: '003', name: '王五', age: '20' }

            ],


        },
        methods: {
            add() {
                const p = { id: '004', name: '老刘', age: 40 }
                this.persons.unshift(p)
            }
        },

    })
</script>

<div id="root">
    <input type="text" name="" id="" v-model="keyword">
    <h1>人员列表</h1>
    <ul>
        <!-- (p,index) in persons -- :key="index" -->
        <li v-for="p of filper" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>

</div>
<script>
    // watch实现
    // #region
    /*new Vue({
        el: '#root',
        data: {
            keyword: '',
            persons: [
                { id: '001', name: '马冬梅', age: '18', sex: '女' },
                { id: '002', name: '周冬雨', age: '19', sex: '女' },
                { id: '003', name: '周杰伦', age: '20', sex: '男' },
                { id: '004', name: '温兆伦', age: '22', sex: '男' }

            ],
            filper: []

        },
        watch: {
            keyword: {
                immediate: true,
                handler(val) {
                    this.filper = this.persons.filter((p) => {
                        return p.name.indexOf(val) != -1
                    })
                }

            }
        }
    })*/
    // #unregion


    //computed实现 
    new Vue({
        el: '#root',
        data: {
            keyword: '',
            persons: [
                { id: '001', name: '马冬梅', age: '18', sex: '女' },
                { id: '002', name: '周冬雨', age: '19', sex: '女' },
                { id: '003', name: '周杰伦', age: '20', sex: '男' },
                { id: '004', name: '温兆伦', age: '22', sex: '男' }

            ]

        },
        computed: {
            filper() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyword) != -1
                })
            }

        }
    })
</script>

 <div id="root">
    <input type="text" name="" id="" v-model="keyword">
    <button @click="sortType=2">年龄升序</button>
    <button @click="sortType=1">年龄降序</button>
    <button @click="sortType=0">原顺序</button>
    <h1>人员列表</h1>
    <ul>
        <li v-for="p of filper" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>

</div>
<script>
    new Vue({
        el: '#root',
        data: {
            sortType: 0,
            keyword: '',
            persons: [
                { id: '001', name: '马冬梅', age: '18', sex: '女' },
                { id: '002', name: '周冬雨', age: '19', sex: '女' },
                { id: '003', name: '周杰伦', age: '22', sex: '男' },
                { id: '004', name: '温兆伦', age: '20', sex: '男' }

            ]

        },
        computed: {
            filper() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyword) != -1
                })

                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                    })
                }
                return arr
            }

        }
    })
</script>