vue 模糊查询demo

最新推荐文章于 2023-10-23 23:03:18 发布

zxqlib

最新推荐文章于 2023-10-23 23:03:18 发布

阅读量2.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38041239/article/details/88875477

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            products: [{
                name: '苹果',
                price: 25,
                category: "水果"
            }, {
                name: '苹果41561',
                price: 15,
                category: "水果"
            }, {
                name: '苹果785498',
                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>

2. 根据数组中某一字段排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue测试2</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                font-size: 14px;
                font-family: "微软雅黑";
            }
            #box{
                width: 500px;
                height: auto;
                border: 1px solid #ccc;
                margin: 50px auto;
                padding: 10px;
            }
            .search{
                width: 480px;
                height: 100px;
                text-align: center;
            }
            .searchBox{
                width: 230px;
                height: 40px;
                outline: none;
                text-indent: 10px;
                margin-right: 20px;
            }
            .btn{
                width: 100px;
                height: 50px;
                cursor: pointer;
                font-size: 18px;
            }
            .goodsheet{
                width: 500px;
                height: auto;
                border: 1px solid #eee;
            }
            .goodsheet tr td,
            .goodsheet tr th{
                width: 33%;
                border: 1px solid #eee;
                padding: 5px 10px;
                text-align: left;
            }

        </style>
    </head>
    <body>
        <div id="box">
            <div class="search">
                <input type="text" class="searchBox" v-model="searchVal">
        
            </div>
            <table class="goodsheet">
                <tr>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>销量</th>
                </tr>
                <tr v-for='(item, key) in list'>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.sales}}万</td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            var myVueTest = new Vue({
                el:'#box',
                data:{
                    goodsList:[
                        //假数据
                        {name:"三星Galaxy Note8",price:5200,sales:2.6},
                        {name:"iphone5s",price:2500,sales:2.2},
                        {name:"iphone6",price:2800,sales:1.6},
                        {name:"iphone6s",price:3200,sales:2.9},
                        {name:"iphone7",price:3800,sales:12.6},
                        {name:"iphone7plus",price:4200,sales:2.1},
                        {name:"iphone8",price:5500,sales:10.6},
                        {name:"华为",price:4600,sales:7.6},
                        {name:"小米",price:1200,sales:32.6},
                        {name:"OPPOR11",price:3000,sales:1.2},
                        {name:"vivoX20",price:3250,sales:2.9}
                    ],
                    searchVal:'',    //默认输入为空
                    letter:'',       //默认不排序
                    original:false   //默认从小到大排列
                },
                //通过计算属性过滤数据
                computed:{
                    list: function(){
                        var _this = this;
                        //逻辑-->根据input的value值筛选goodsList中的数据
                        var arrByZM = [];//声明一个空数组来存放数据
                        for (var i=0;i<this.goodsList.length;i++){
                            //for循环数据中的每一项（根据name值）
                            if(this.goodsList[i].name.search(this.searchVal) != -1){
                                //判断输入框中的值是否可以匹配到数据，如果匹配成功
                                arrByZM.push(this.goodsList[i]);
                                //向空数组中添加数据
                            }
                        }
                        //一定要记得返回筛选后的数据
                        return arrByZM;
                    }
                }
            });
        </script>
    </body>
</html>

zxqlib

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue 模糊查询demo

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <input type="text" v-...
复制链接

扫一扫