且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Vue.js filterBy 多字段搜索

更新时间:2023-12-05 17:41:46

filterBy 自定义过滤器没有记录在 AFAIK,但您可以使用 method 来制作自己的过滤器:

var demo = new Vue({el: '#demo',数据: {搜索:'是',人们: [{姓名:'Koos',年龄:30,眼睛:'红色'},{名称:'格特',年龄:20,眼睛:'蓝色'},{姓名:'彼得',年龄:12,眼睛:'绿色'},{姓名:'Dawid',年龄:67,眼睛:'深绿色'},{姓名:'约翰',年龄:15,眼睛:'紫色'},{姓名:'汉斯',年龄:12,眼睛:'粉红色'}]},方法: {自定义过滤器:功能(人){返回 person.name.indexOf(this.search) != -1||person.eyes.indexOf(this.search) != -1;}},})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script><div id="演示"><input type="text" class="form-control" v-model="search"/><br/><table class="table"><头><tr><th>name</th><th>眼睛</th><年龄></tr></thead><tr v-for="person in people | filterBy customFilter"><td>{{person.name }}</td><td>{{person.eyes }}</td><td>{{person.age }}</td></tr>