vue 列表渲染 filter

添加链接描述

filter()、concat() 和 slice()。不会变更原始数组，而总是返回一个新数组

我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据
可以在原有数据属性的基础上，添加一个新属性，在渲染的时候使用的是这个新属性

    <div id="app">
        <button @click="chooseAll">all</button>
        <button @click="chooseUnderage">under age</button>
        <button @click="chooseGuangzhou">Guangzhou</button>
        <div v-for="item in showData">
            {{item.name}} is {{item.age}} and living in {{item.city}}.
        </div>
    </div>

       new Vue({
            el: '#app',
            data() {
                return {
                    showData: [],
                    studentMsg: [{
                        name: "Amy",
                        age: 12,
                        city: "Guangzhou"
                    }, {
                        name: "Cindy",
                        age: 22,
                        city: "Beijing"
                    }, {
                        name: "Linda",
                        age: 19,
                        city: "Guangzhou"
                    }, {
                        name: "Peter",
                        age: 45,
                        city: "Shanghai"
                    }, ]

                }
            },
            methods: {
                chooseAll: function() {
                    this.showData = this.studentMsg
                },
                chooseUnderage: function() {
                    this.showData = this.studentMsg.filter(student => {
                        return student.age < 18
                    })
                },
                chooseGuangzhou: function() {
                    this.showData = this.studentMsg.filter(student => {
                        return student.city == 'Guangzhou'
                    })
                },
            },

            //生命周期函数
            created: function() {
                this.showData = this.studentMsg
            },

            //计算属性
            computed: {

            },
            watch: {

            },

        })