【Vue】過濾filter(function(item){}) /match

Vue過濾

• HTML寫法

 <div id="app">
        <h1>過濾</h1>
        <input type="text" v-model="filtertext">

        <button @click="filterData">送出</button>
        <span>{{filterarray}}</span>  //{{filterarray}}只會得到完整的array

        <li v-for="(item, key) in filterarray" :key="item.age">  //要把array拉出來才能使用
            {{ key }} - {{ item.name }} {{ item.age }} 歲
        </li>
    </div>

過濾寫法

• vm.filterarray = vm.member.filter(function (item) {

                return item.name.match(vm.filtertext)})
  

• XXX.filter(function(item){ XXX )}) //把ＸＸＸ抓出來
• OOO.match(vm.filtertext) //把符合vm.filtertext的資料拉出來

//用filter把member資料拉出來放到item中，然後如果判斷item的某個性質符合vm.filtertext，那就把這筆資料回傳到filterarray中。

 var app = new Vue({

        el: '#app',
        data: {

            filtertext: '',   //要過濾文字用v-model放在這裡

            filterarray: [],   //過濾出的東西，可以放在這裡

            member: [{
                name: "小明",
                age: "23",
            }, {
                name: "杰倫",
                age: "23",
            }]
        },
        methods: {
            filterData: function () {
                var vm = this;
                vm.filterarray = vm.member.filter(function (item) {
                    console.log(vm.filtertext, item.name, item.age)
                    return item.name.match(vm.filtertext)
                })
            }
        }

    })

​