简易的查询数据

最新推荐文章于 2021-09-08 10:50:38 发布

sslcsq

最新推荐文章于 2021-09-08 10:50:38 发布

阅读量128

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/sslcsq/article/details/103621934

版权

使用vue实现简单的搜索功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
    <div id="ssl">
        <input type="text" placeholder="请输入您要查询的数据" v-model="title" @input="search()">
        <!-- 给input框绑定一个v-model用来接收输入的数据 给他一个input事件-->
        <ul>
            <li v-for="(e,i) in lists" :key="i">
                <!-- 循环遍历出来查找的数据 -->
                {{e.title}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:"#ssl",
        data:{
            title:"",
            list:[//随便写几个数据
                { id: 1, title: "想和有趣的人一起浪费人生" },
                { id: 2, title: "vue的小案列" },
                { id: 3, title: "nodeJs" },
                { id: 4, title: "微信小程序" },
                { id: 5, title: "react" },
                { id: 6, title: "仓库管理" },
                { id: 7, title: "vuex" },
                { id: 8, title: "redux" },
                { id: 9, title: "router" }
            ],
            lists:[]
        },
        methods:{
            search()
            {
                this.lists=[];//每次查找先把上次查找的清空
                if(this.title=="")//判断输入框是否输入内容，如果没有return false 结束
                {
                    return false;
                }
                for(var i in this.list)
                {
                    if(this.list[i].title.indexOf(this.title) >= 0) 
                    //循环判断如果我们模拟的数据中包含我的input框输入的内容 则添加新数组里面 然后遍历出来
                    {
                        this.lists.push(this.list[i])
                    }
                }
            }
        }
    })
</script>
</html

效果如下