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

server/2024/9/24 10:12:50/

(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监听

(5)计算属性


http://www.ppmy.cn/server/111064.html

相关文章

MongoDB 中国用户大会8月31日 (MongoDB 8.0 发布)

1.会议时间地点 「2024 MongoDB 中国用户大会」上海站线下活动&#xff08;2024年8月31日09:00&#xff09;正式开始&#xff0c;开放签到时间08:00-09:00。活动地址&#xff1a;上海凯宾斯基酒店 3F 舜华宴会厅&#xff08;上海市浦东新区陆家嘴环路1288号&#xff09; 2.会议…

Spring Boot自动配置源码解析

一、自动配置概述 1.1 什么是自动配置 Spring Boot的自动配置是一种能够根据类路径中的依赖、配置文件中的属性以及其他条件&#xff0c;自动配置Spring应用上下文的功能。它通过扫描项目中的类和配置文件&#xff0c;判断哪些组件需要自动装配&#xff0c;从而减少了手动编写…

Soul Machines——AI生成虚拟主播或虚拟人,模拟真人交互

一、Soul Machines介绍 Soul Machines 致力于开发高度逼真的虚拟人和数字化身&#xff0c;通过结合人工智能、计算机图形学和面部动画技术&#xff0c;打造具有情感交互能力的虚拟角色。这些虚拟角色可以应用于客户服务、教育、健康护理等领域&#xff0c;为用户提供更具人性化…

github和gitlab的区别是什么

区别&#xff1a;github如果使用私有仓库&#xff0c;是需要付费的&#xff1b;而gitlab可以在上面搭建私人的免费仓库。gitlab让开发团队对他们的代码仓库拥有更多的控制&#xff0c;相对于github&#xff0c;它有不少的特色&#xff1a;允许免费设置仓库权限&#xff1b;可以…

沉浸式体验亚马逊云科技上私有化部署零一万物AI大模型

小李哥将继续带大家沉浸式体验亚马逊云科技上的国产AI大模型。最近亚马逊云科技的机器学习模型管理平台Amazon SageMaker JumpStart 上线了由零一万物提供的基础模型 Yi-1.5 6B/9B/34B&#xff0c;这也是首批登陆中国区 Amazon SageMaker JumpStart 的中文基础模型&#xff0c;…

【C++ Primer Plus习题】8.1

问题: 解答: #include <iostream> using namespace std;void print(const char* str) {cout << str << endl; }void print(const char* str,int size) {static int count 0;count;for (int i 0; i < count; i){cout << str << endl;} }int…

深度学习100问46:什么是Dropout

嘿&#xff0c;你知道吗&#xff1f;在深度学习的奇妙世界里&#xff0c;有个超厉害的家伙叫 Dropout。 想象一下&#xff0c;你正在建造一个超级复杂的神经网络&#xff0c;就像搭建一座巨大的城堡。但有时候这座城堡可能会变得太娇气&#xff0c;只认得它见过的特定东西&am…

vue2.0中ts中vuex模块化如何使用

vue2.0中ts中vuex模块化如何使用 一、store中如何配置1.index.ts2.user.ts 二、如何使用vuex 一、store中如何配置 1.index.ts import Vue from vue; import Vuex from vuex; import { UserStateType } from ./modules/user; //导入 UserStateType 类型 Vue.use(Vuex);export…