添加关键字搜索功能

1、在商品信息输入框后面再加一个关键字搜索框

搜索关键字: <input type="text" class="form-control" v-model="keyword" />

2、在data里定义一个keyword变量，然后用v-model绑定到搜索框里

keyword:'',  //搜索的关键字

3、定义一个`search()`方法，把keyword作为参数传进入

先在search()方法里定义一个空数组
用foreach()方法遍历list数组，用之前遍历list数组的item作为作为里面箭头函数的参数
用indexof()方法判断商品的NAME跟你输入的关键字有没有匹配的字符，也就是判断indexof()方法的返回值是否为-1，为-1则无匹配信息，不为-1则有匹配信息
如果不为-1则把匹配的商品信息插入定义的新数组
foreach()方法遍历完后，返回新数组

3.1、 `search()`方法代码

search(keyword){var newlist = [];this.list.forEach(item=>{if(item.NAME.indexOf(keyword) != -1){newlist.push(item);}})return newlist;}

4、这时，要把利用v-for遍历出来的商品信息所依赖的数组改为search（keyword）方法，因为这个方法最终会返回一个数组

<tr v-for="item in search(keyword)" :key="item.id"><td>{{item.id}}</td><td>{{item.NAME}}</td><td>{{item.CTIME | setdate}}</td><td><a @click.prevent="del(item.id)">删除</a></td>  <!-- prevent清除a链接的默认行为 -->
</tr>

4.1、页面效果

*注意：

为什么不输入关键字会显示全部的商品信息呢，这是因为输入为空时，indexof方法返回的值为0，不为-1，所以能显示全部信息,如果输入空格则返回-1

Vue学习笔记04（关键字搜索）相关推荐

Vue学习笔记1-什么是Vue
Vue学习笔记1-什么是Vue 一.什么是 Vue? 渐进式 JavaScript 框架,一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架. Vue (发音为 /vjuː/,类似 vie ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
Vue学习笔记（三） —— 前后端交互
简介本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
取得 Git 仓库 —— Git 学习笔记 04
取得 Git 仓库 -- Git 学习笔记 04 我认为, Git 的学习分为两大块:一是工作区.索引.本地版本库之间的交互:二是本地版本库和远程版本库之间的交互.第一块是基础,第二块是难点. 下面, ...
JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb-综合案例(用户信息)-学习笔记04【删除选中功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...

Vue学习笔记04（关键字搜索）

添加关键字搜索功能

1、在商品信息输入框后面再加一个关键字搜索框

2、在data里定义一个keyword变量，然后用v-model绑定到搜索框里

3、定义一个`search()`方法，把keyword作为参数传进入

3.1、 `search()`方法代码

4、这时，要把利用v-for遍历出来的商品信息所依赖的数组改为search（keyword）方法，因为这个方法最终会返回一个数组

4.1、页面效果

*注意：

Vue学习笔记04（关键字搜索）相关推荐

最新文章

热门文章

Vue学习笔记04（关键字搜索）

添加关键字搜索功能

1、在商品信息输入框后面再加一个关键字搜索框

2、在data里定义一个keyword变量，然后用v-model绑定到搜索框里

3、定义一个search()方法，把keyword作为参数传进入

3.1、 search()方法代码

4、这时，要把利用v-for遍历出来的商品信息所依赖的数组改为search（keyword）方法，因为这个方法最终会返回一个数组

4.1、页面效果

*注意：

Vue学习笔记04（关键字搜索）相关推荐

最新文章

热门文章

3、定义一个`search()`方法，把keyword作为参数传进入

3.1、 `search()`方法代码