Vue 筛选

对数据进行筛选功能。

**功能分析:**当你输入一串文字时,以最快的速度筛选出相对应的内容,如果没有对应的内容则不予显示。

效果演示

原始样式
在这里插入图片描述
在输入框输入平板时筛选相应的内容
在这里插入图片描述

代码演示

**注意:**引入Vue.js架包

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="out"><h1>输入数据进行筛选</h1><input type="text" v-model="texts"/><ul v-for="item in list"><li>{{item}}</li></ul></div></body><script type="text/javascript">var vm = new Vue({el:"#out",data:{texts:"",arr:["手机","电脑","电视","平板","电话","耳机","鼠标","键盘","显示器"]},computed:{list(){let arr1 = []this.arr.map(function(item){if(item.indexOf(this.texts)!=-1){arr1.push(item)}					}.bind(this))return arr1}}})</script></html>

扫一扫关注我的公众号获取更多资讯呦!!!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565853.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OpenCV 例程200篇】71. 连续函数的取样

【OpenCV 例程200篇】71. 连续函数的取样 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 1.2 连续函数的取样 连续函数必须经过取样和量化转换为离散函数&#xff0c;才能用计算机进行处理。 …

第一个鸿蒙程序“hello world“

开发者文档: 开发者文档 运行环境要求 下载和安装DevEco Studio下载和安装Node.js 开始hello world 1.打开DevEco Studio&#xff0c;在欢迎页点击Create HarmonyOS Project&#xff0c;创建一个新工程。 2.选择设备类型和模板&#xff0c;以Wearable为例&#xff0c;选择Empty…

Vue 选项卡效果

用Vue实现选项卡效果。 效果演示 点击CSS 点击Vue 看起来是不是有点菜单导航的感觉&#xff0c;下面跟随我一起来一探究竟&#xff1f; 代码演示 **注意&#xff1a;**引入Vue.js架包 <!DOCTYPE html><html><head><meta charset"utf-8" /&…

【OpenCV 例程200篇】72. 一维离散傅里叶变换

【OpenCV 例程200篇】72. 一维离散傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 1.3 一维离散傅里叶变换 数字信号和数字图像都是采样得到的离散变量。 对原函数的变换取样后的数…

鸿蒙系统中的 JS 开发框架

今天鸿蒙终于发布了&#xff0c;开发者们也终于“沸腾”了。 源码托管在国内知名开源平台码云上&#xff0c;https://gitee.com/openharmony 我也第一时间下载了源码&#xff0c;研究了一个晚上&#xff0c;顺带写了一个 hello world 程序&#xff0c;还顺手给鸿蒙文档提了 2 个…

【OpenCV 例程200篇】73. 二维连续傅里叶变换

【OpenCV 例程200篇】73. 二维连续傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.1 二维连续傅里叶变换 设 f(t,z)f(t,z)f(t,z) 是二维连续变量 t,zt, zt,z 的连续函数&#xff…

Vue 购物车案例

用Vue实现购物车。 程序详解&#xff1a; 页面要显示商品的基本信息&#xff08;编号&#xff0c;名称&#xff0c;单价&#xff0c;购买数量&#xff0c;总价等&#xff09; 1.增加和减少商品数量 2.商品金额会随数量变化 3.会自动计算总金额 4.对某一类商品进行移除操作 5.还…

Python入门基础篇(一)列表,详细实用,简单易懂!!!!

请仔细阅读哦&#xff01;&#xff01;&#xff01; 文章目录前言一、Python列表的创建与删除1.赋值运算符直接创建列表2.创建空列表3.创建数值列表4.删除列表二、访问列表中的元素三、遍历列表中的元素1.直接使用for循环实现2.使用for循环和enumerate()函数实现四、列表元素的…

【OpenCV 例程200篇】74. 图像的抗混叠

【OpenCV 例程200篇】74. 图像的抗混叠 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.2 图像的混叠和重取样 由于无法对一个函数无限地取样&#xff0c;因此在数字图像中总是会出现混叠。 …

图片滚动显示

用H5实现图片滚动显示像跑马灯一样的效果。 程序详解&#xff1a; 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢 效果演示&#xff08;图片自右向左滚动&#xff09; 代码演示 <!DOCTYPE html> <html><head><meta charset&…

【OpenCV 例程200篇】75. Numpy 实现图像傅里叶变换

【OpenCV 例程200篇】75. Numpy 实现图像傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.3 二维离散傅里叶变换&#xff08;DFT&#xff09; 对于二维图像处理&#xff0c;通常使…

什么是大数据,大数据到底应该如何学?

文章目录 一、食用须知二、大数据的基本概念1. 什么是大数据2. 数据是如何采集的3. 大数据真的能预测吗 三、什么是大数据开发四、什么是大数据分析五、应如何学习大数据 一、食用须知 再更一篇技术杂谈类的文章。。。粉丝甲&#xff1a;所以这就是你拖更系列文章和视频的理由…

IDEA Servlet页面报错

IDEA和MyEclipise使用方法不同&#xff0c;在IDEA里新建Servlet的时候会报错。 错误如图所示 这是因为idea中没有导入servlet-api包造成的 解决办法如下&#xff1a; file –> project Structure 点击Libraries &#xff0c;然后绿色的号&#xff0c;找到自己tomact的部…

【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换

【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.3 二维离散傅里叶变换&#xff08;DFT&#xff09; 对于二维图像处理&#xff0c;通常使…

Python入门基础篇(二)元组,更适合新手哦!!!

文章目录前言一、Python元组的创建与删除1.元组的创建2.元组的删除二、元组的访问与修改1.访问元组元素2.修改元组元素总结前言 元组&#xff08;tuple&#xff09;是Python中另一种重要的序列结构&#xff0c;它与列表&#xff08;list&#xff09;有着许多类似之处。但是元组…

IDEA 载入jQuery的方法

使用IDEA开发java web时&#xff0c;页面写入了jquery代码&#xff0c;但是可能因为未能添加该模块&#xff0c;所以并不能起到作用。 那么如何添加Jquery模块呢&#xff1f;&#xff1f;&#xff1f; 最简单的添加方法 1.在jsp中写入&#xff1a; <script src"htt…

【OpenCV 例程200篇】77. OpenCV 实现快速傅里叶变换

【OpenCV 完整例程】77. OpenCV 实现快速傅里叶变换 欢迎关注 『OpenCV 完整例程 100 篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 傅里叶变换在理论上需要 O(MN)2O(MN)^2O(MN)2 次运算&#xff0c;非常耗时&#xff1…

python入门基础篇(三)序列切片,列表、元组推导式

前面介绍了列表与元组&#xff0c;在这里补充一下关于列表、元组推导式&#xff0c;以及序列的切片。切片不仅仅用于列表元组&#xff0c;还可以用于字符串等等 文章目录一、序列切片二、列表推导式1.根据列表生成指定需求的列表2.生成指定范围的数值列表3.从列表中选择符合条件…

Vue商品添加到购物车

用Vue实现把商品添加到购物车然后计算购物车里商品总金额。 功能分析&#xff1a; 1.商品添加到购物车 2.购物车显示商品的名称数量价格 3.计算购物车商品的总金额 4.删除购物车商品 效果演示 原始样式 添加商品 增加商品数量 下面向大家展示一下实现的过程。 代码演示 …

【OpenCV 例程200篇】78. 频率域图像滤波基础

【OpenCV 例程200篇】78. 频率域图像滤波基础 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 频率域低通滤波器 图像变换是对图像信息进行变换&#xff0c;使能量保持但重新分配&#xff0…