Vue输入框模糊搜索的多种写法

已于 2024-09-05 13:45:18 修改
阅读量535 收藏 1
点赞数 8
文章标签： javascript 前端 vue.js
于 2024-09-03 02:01:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42498352/article/details/141833897
版权

（1）模板方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 输入框模糊搜索 -->
    <div id="box">
        <input type="text" v-model="mytext"/>
        <ul>
            <template v-for="item in dataList" :key="item">
                <li v-if="item.includes(mytext)">{{ item }}</li>
            </template>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    mytext:'',
                    dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
                }
            }
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

（2）复制方案 （浪费内存不优雅）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 输入框模糊搜索 -->
    <div id="box">
        <input type="text" v-model="mytext" @input="handleInput" />
        <ul>
            <template v-for="item in dataList" :key="item">
                <!-- <li v-if="item.includes(mytext)">{{ item }}</li> -->
                 <li>{{item}}</li>
            </template>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    mytext:'',
                    dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
                    baklist:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'] // 复制data
                }
            },
            methods:{
                handleInput(){
                  this.dataList = this.baklist.filter(item=>item.includes(this.mytext))
                }
            }
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

（3）函数表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 输入框模糊搜索 -->
    <div id="box">
        <input type="text" v-model="mytext"/>
        <ul>
            <template v-for="item in test()" :key="item">
                <li>{{ item }}</li>
            </template>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    mytext:'',
                    dataList:['aaa1','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb','aac','aab'],
                }
            },
            methods:{
                test(){
                    return this.dataList.filter(item=>item.includes(this.mytext))
                }
            }
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>

（4）watch监听  适合异步请求

<body>
    <!-- 输入框模糊搜索 watch监听-->
    <div id="box">
        <input type="text" v-model="mytext"/>
        <ul>
            <template v-for="item in dataList" :key="item">
                 <li>{{item}}</li>
            </template>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    mytext:'',
                    dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
                    baklist:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'] // 复制data
                }
            },
            watch:{
                mytext(value){
                    setTimeout(()=>{
                        this.dataList = this.baklist.filter(item=>item.includes(this.mytext))
                    },2000)
                }
            },
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>

（5）计算属性

<body>
    <!-- 输入框模糊搜索 计算属性-->
    <div id="box">
        <input type="text" v-model="mytext"/>
        <ul>
            <template v-for="item in conputedList" :key="item">
                 <li>{{item}}</li>
            </template>
        </ul>
    </div>
    <script>
        var obj = {
            data(){
                return {
                    mytext:'',
                    dataList:['aaa1','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
                }
            },
            computed:{
                conputedList(value){
                    return this.dataList.filter(item=>item.includes(this.mytext))
                }
            },
        }
        Vue.createApp(obj).mount('#box')
    </script>
</body>

花开富贵城
关注
vue简单写一个搜索框搜索时模糊提示
m0_61233367的博客
10-11 810
搜索框输入一个字 列表有相同字的列表出现
Vue实现模糊查询：filter（）
YY的博客
11-21 4158
Vue实现模糊查询：filter（）
vue实现Input输入框模糊查询方法
10-16
主要为大家详细介绍了vue实现Input输入框模糊查询方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 输入框搜索（包含、开头、结尾）
qq_42383283的博客
11-28 920
需要用到vue的计算属性、数组的filter方法、es6中新增的字符串方法。 创建vue实例，添加组件（使用数据的组件(插值表达式 {{ list}})、与搜索框组件（v-model 绑定searchVal）） 参考vue官方教程 在vue中添加计算属性 computed: { // 计算属性的 getter // newList 是输入框中的值发生改变时替换list //computed 当依赖的值发生改变时会自动执行函数，这里依赖了list 与 searchVal 两个值
vue input输入框模糊查询的示例代码
12-29
Vue 模糊查询功能 原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。 input输入框，模糊查询 <input type=text placeholder=请输入... v-model=searchVal> <
Vue-搜索框实现
热爱编程 热爱生活
10-22 9655
一.方法分析 1.字符串匹配 2.v-for循环实时更新元素 3.@click=""实现点击后页面的跳转同时设置不同id来根据内容的不同来跳转到不同页面 二.代码分析： html代码: 1.设置v-model绑定元素内容 2.goPage(data.id) 写一个函数来根据id不同跳转界面 <div class="container" id="div1"> <div class="search bar1"> <form> ..
vue实战之搜索框功能实现
最新发布
weixin_72671719的博客
04-05 2117
【代码】vue实战之搜索框功能实现。
看完必会的经典操作：vue如何通过对搜索框的输入，对内容进行检索并展示
qq_52526079的博客
10-19 2735
方法三：watch监听输入框中输入内容，当输入后便可获取新输入的内容，根据输入的值进行搜索和过滤。方法二：输入框中输入内容并失去焦点时，进行搜索和过滤。方法一：计算属性（依赖发生变化时，进行计算）
vue3模糊搜索怎么写
09-27
在 Vue3 中，模糊搜索可以通过过滤数组来实现。具体写法如下： ```html 请输入关键词" /> <li v-for="item in filteredList" :key="item.id">{{ item.name }} import { defineComponent } from 'vue'...
vue 实现边输入边搜索功能的实例讲解
10-18
今天小编就为大家分享一篇vue 实现边输入边搜索功能的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
him-vue：开源的H5即时聊天系统spring-boot + netty + protobuf + vue〜
02-05
他的 使用前先阅读开源协议：，，... 找到一个解决输入侧框的方法：@模糊= “chatTextBlur”监听失去焦点的事件（VUE写法），然后在事件里面执行window.scroll(0, 0); 因为设置了定位， overflow: scroll原生滚动，i
input框 模糊搜索节流方法
weixin_49186680的博客
04-02 948
<input v-model="amount" type="number" @input="throttle" placeholder="javascript" size="large" class="" /> // 调用接口获取模糊数据 giveIntegralTotal() { let obj = {} this.$http.giveIntegralTotal(this.amount).then(res => { console.log(res) })
vue.js学习笔记（一）引入、初始化、写法与基本结构、6个常用指令
zhaodahan_88的博客
04-07 524
目前自学编程6个月，主要学习H5与JS，现开始学习vue，学习笔记记录。
Vue实现模糊查询搜索功能
xiaowude_boke的博客
10-16 1180
vue模糊查询数据
vue实现input输入模糊查询(三种方式)
热门推荐
厚积薄发.
08-12 2万+
vue实现input输入模糊查询(三种方式)。vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。这里我是在 vue-cli 中完成的，完整代码如下。这里自己导入 vue，我是导入本地已经下载好的。vue 中通过watch 监听实现模糊查询。输入关键字模糊查询，名字和年龄都可以。......
纯前端！超简单！实现查询功能
weixin_45928161的博客
05-08 2966
然后，对于每个文章对象，使用toLowerCase函数将content属性转换为小写字母，使用includes函数判断是否包含selectContent，如果是，则将该对象添加到articlesShow数组中。曾经一无所知的我手撸过一次纯前端的模糊查询功能，当时绞劲脑汁做出来，还颇有成就感，如今回头看就是纯小丑！方法接受一个函数作为参数，该函数用于测试每个数组元素是否符合指定的条件。方法来过滤一个数组中不需要的元素，返回一个新的数组。方法过滤出其中的偶数，最终得到了一个新的数组。
前端js实现本地模糊搜索
weixin_42645716的博客
06-08 1352
前端js实现本地模糊搜索
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值