说一个实用的数组筛选，使用的是数组filter()的方法。举例代码如下：

HTML代码：

<div>
            <label>姓名:</label>
            <input type="text" v-model="uname">
            <label>年龄:</label>
            <input type="text" v-model="ages">
            <button type="button" @click="addstudent">追加末尾</button>
            <br>
            <button type="button" @click="endremove">末尾移除</button>
            <button type="button" @click="removefrist">删除第一个</button>
            <button type="button" @click="addfront">添加到前面</button>
            <button type="button" @click="reversestu">反转</button>
            <button type="button" @click="sortstudent">年龄升序</button>
            <label>筛选</label>
            <input type="text" v-model="filterstudent">
            <table border="1" width="50%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 三元表达式 为真实循环新数组 否则循环原数组 -->
                    <tr v-for="(item,index) in (bool?newarray:array)" align="center">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>
                            <button type="button" @click="deletestu(index)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

js代码：

 var vm = new Vue({
            el: "#app",
            data: {
                array: [{ name: "小智", age: 18 },{ name: "潇潇", age: 19 }],
                uname: "",
                ages: "18",
                filterstudent: "",//过滤筛选
                newarray: [],//新数组
                bool: false, //布尔用于判断三元表达式循环
                arr:[1,2,3,4,5],
                object:{
                    name:"小智",
                    age:21,
                },
                target:{},
                obj1:{
                    name:"潇潇",
                },
                obj2:{
                    age:19,
                },
                obj3:{
                    sex:"男",
                }
            },
            methods: {
                //追加末尾添加
                addstudent() {
                    this.array.push({ name: this.uname, age: this.ages })
                },
                // 末尾移除
                endremove() {
                    this.array.pop()
                },
                //删除第一个
                removefrist() {
                    this.array.shift()
                },
                // 添加到前面
                addfront() {
                    this.array.unshift({ name: this.uname, age: this.ages })
                },
                // 反转
                reversestu() {
                    this.array.reverse()
                },
                //年龄升序
                sortstudent() {
                    this.array.sort(function (a, b) {
                        return a.age - b.age;  //升序返回a-b   降序返回b-a
                    });
                },
                //根据下标删除
                deletestu(index) {
                    this.array.splice(index, 1) //根据传过来的下标删除1个
                },
                //模糊查询
                filterArray() {
                    var  _filterstudent =this.filterstudent  //变量接收模糊查询输入框的值 避免每次调用Vue实例 这样效率更高
                    // 新数组接收
                    this.newarray = this.array.filter(function (value, index, arr) { //filter() 参数1元素  参数2下标  参数3对象本身
                        return value.name.indexOf(_filterstudent) != -1; //匹配不到返回-1  不等于-1就是查找的到 返回匹配的值 用新数组接收 
                    });
                },
                
            },
            watch: {
                filterstudent(newvalue,oldvalue) {  //监听双向绑定的变量
                    if (newvalue == "") { //如果新值为空时
                        this.bool = false;  //布尔为false  上面循环渲染的还是原数组
                    } else {  //否则相反 
                        this.filterArray(); //调用上面的方法
                        this.bool = true; //布尔为true 循环新数组
                    }

                }
            }
        });

代码如上，实现的效果主要是对学生类的增删改查，删除第一个，末尾删除，添加到前面等等。

主要说的是这个筛选和监听及三元表达式。

filter(value,index，array)筛选的方法有三个参数，参数1元素，参数2下标，参数三对象本身。剩下的代码中国注释都有，方便自己以后查看，今天的重点总结一下。