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

(1)模板方案

html 复制代码
<!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)复制方案 (浪费内存不优雅)

html 复制代码
<!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)函数表达式

html 复制代码
<!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监听

(5)计算属性

相关推荐
天天扭码12 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531712 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户516816614584113 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
libraG13 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅13 小时前
JavaScript 作用域
前端·javascript
前端缘梦13 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
我是天龙_绍13 小时前
使用 TypeScript (TS) 结合 JSDoc
前端
云枫晖13 小时前
JS核心知识-事件循环
前端·javascript
Simon_He13 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan14 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript