vue2过滤器模糊查询

最新推荐文章于 2024-01-04 20:27:57 发布

seFei_Q

最新推荐文章于 2024-01-04 20:27:57 发布

阅读量2.9k

点赞数

分类专栏： vue 文章标签：模糊查询

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model='search' />
    <ul v-for="item in searchData ">
        <li>{{item.name}},价格:￥{{item.price}}</li>
    </ul>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            products: [{
                name: '苹果',
                price: 25,
                category: "水果"
            }, {
                name: '香蕉',
                price: 15,
                category: "水果"
            }, {
                name: '雪梨',
                price: 65,
                category: "水果"
            }, {
                name: '宝马',
                price: 2500,
                category: "汽车"
            }, {
                name: '奔驰',
                price: 10025,
                category: "汽车"
            }, {
                name: '柑橘',
                price: 15,
                category: "水果"
            }, {
                name: '奥迪',
                price: 25,
                category: "汽车"
            }, {
                name: '火龙果',
                price: 25,
                category: "工具"
            }]
        },
       
 computed: {
            searchData: function() {
                var search = this.search;
		var searchVal = '';//搜索后的数据
                if (search) {
                   searchVal = this.products.filter(function(product) {
                        return Object.keys(product).some(function(key) {
			//搜索所有的内容
                            return String(product[key]).toLowerCase().indexOf(search) > -1;
			//只搜索问题内容（某一个key）
			   return String(product['questions']).toLowerCase().indexOf(search)>-1;
                        })
                    })
		return searchVal;
                }
            }
        }

    })
</script>
</body>
</html>

seFei_Q

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue2过滤器模糊查询

{{item.name}},价格:￥{{item.price}} var vm = new Vue({ el: '#app', data: { search: '', products: [{ name: '苹果', price:
复制链接

扫一扫