vue模糊搜索

最新推荐文章于 2023-04-08 20:22:41 发布

weixin_44423850

最新推荐文章于 2023-04-08 20:22:41 发布

阅读量2.3k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44423850/article/details/115000439

版权

在输入框如果又相同的就显示出来

1.观察页面，有输入框，和数组（数组的显示用到循环v-for）

2.用vue写，需要获得输入框里输入的内容，用v-model表单双向绑定

3.数组里搜索是否有匹配的（indexOf（）检索字符串是否出现，没有返回-1），有显示匹配的项，没有不显示，（就想到用v-if / v-show）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="lib/vue.js"></script>
    <title>练习</title>
</head>
<body>
    <div id="box">
        <input type="text" v-model="myText">
        <!-- 用名字检索 -->
        <div v-for="site in list" v-if="site.name.indexOf(myText)!=-1">
            <!-- indexOf检索!字符串!是否出现，没有检索到就返回-1 -->
            <!-- v-if 如果是true就显示  // false就是隐藏 -->
            <!-- 如果项名字和价格一起检索的话用 || 或-->
            <!-- v-if="site.price.indexOf(myText)!=-1 || site.name.indexOf(myText)!=-1" -->
            {{site.name}}
            {{site.price}}
        </div>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                list:[
                    {name:'aa',price:'100'},
                    {name:'bb',price:'200'},
                    {name:'cc',price:'300'}
                ],
                myText:'',
            },
        })
    </script>
    
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="lib/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="box">
        <input type="text" v-model="myText">
        <p v-for="data in getDataList">{{data}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            myText: "",
            dataList: ['奔驰', '宝马', '宾利', '法拉利'],
        },
        computed: {
            getDataList() {
                return this.dataList.filter(item => item.indexOf(this.myText) > -1)
            }
        },
    })
</script>

    
</body>
</html>