第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- 需要用到Jquery吗？？？不推荐在vue中使用Jquery --> </head> <body>
<div id="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label> <label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<!-- 在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()"> <label>
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords">
</label> </div>
</div> <table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前，v-for中的数据，都是直接从data上的list中直接渲染过来的 -->
<!-- 现在，我们自定义了一个方法，同时，把所有的关键字，通过传参的形式，传递给了search方法 -->
<!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table> </div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',//搜索的关键字
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add(){//添加的方法
// console.log('ok')
//分析：
//1.获取到id 和name ，直接从data上面获取
//2.组织出一个对象
//3.把这个对下，调用数组的相关方法，添加到当前data上的list中
//4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
//5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作； var car={id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
this.id=this.name=''
},
del(id){//根据Id删除数据
//分析：
//1.如何根据Id，找到要删除这一项的索引
//2.如果找到索引了，直接调用数组的splice方法 /* this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1)
//在数组的some方法中，如果return true,就会立即终止这个数组的后续循环
return true;
}
})*/ var index = this.list.findIndex(item=>{
if(item.id==id){
return true;
}
})
// console.log(index)
this.list.splice(index,1)
}, search(keywords){//根据关键字，进行数据的搜索
/* var newList=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){
newList.push(item)
}
})
return newList*/
//注意：forEach some filter findIndex 这些都属于数组的新方法，
//都会对数组中的每一项，进行遍历，执行相关操作；
return this.list.filter(item=>{
// if(item.name.indexOf(keywords)!=-1)
//注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
//如果包含，则返回true，否则返回false
//contains
if(item.name.includes(keywords)){
return item
}
})
}
}
});
</script>
</body>
</html>
第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤的更多相关文章
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--14 使用v-model实现计算器的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- 【.NET】由于代码已经过优化或者本机框架位于调用堆栈之上，无法计算表达式的值。
前言 上段时间做项目时,遇到如题之类问题,如今过去有一段时间了,具体出现的情形忘了,当时虽然找到了解决方法,但是依旧没有弄明白出现此种情况是何种原因,后来在微软的帮助支持中心找到了答案,特此记录,以防 ...
- ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用
展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...
- 安卓渗透测试工具——Drozer（安装和使用）
移动端渗透测试工具相比丰富的web端真的是少之又少,最近在做app的安全测试,用到了drozer,drozer的安装过程真的是太心酸了,中间报错了有6次才成功安装.. 一.环境准备 首先准备以下环境: ...
- HNU_团队项目_数据库框架Mybatis_环境配置和样例
前言 数据库从最传统的JDBC连接方式和数据库池化技术到Hibernate的使用,再到Mybatis的快捷轻量级操作,技术迭代的速度飞快. 在了解了基础的理论和方法后,学习前沿编程框架.工具,我认为是 ...
- 【HANA系列】SAP HANA SQL从给定日期中获取月份
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL从给定日 ...
- 深入源码分析Spring中的构造器注入
# 1. 示例 构造器注入类,分别有三个构造器,一个是无参构造器,一个是注入一个Bean的构造器,一个是注入两个Bean的构造器: public class ConstructorAutowiredT ...
- python高级 之(零) --- 重点难点
生成式子 列表生成式 字典生成式 深浅拷贝 list0 = [12,24,34,32,[64,23]] # 浅拷贝:浅拷贝只是将最外层容器拷贝一份放在堆里面,内层的容器不会被拷贝还是使用原来的地址 l ...
- 应用安全 - 工具|框架 - Java - Jenkins - 漏洞 - 汇总
未授权访问 /script /manage/asynchPeople//config.xml CVE-2015-8103 Date 2015.11 类型反序列化导致远程命令执行 影响范围Jenkins ...
- C++学习笔记-模板
模板把函数或类要处理的数据类型参数化,表现为参数的多态性,称为类属.模板用于表达逻辑结构相同,但具体数据元素类型不同的数据对象的通用行为. 什么是模板 类属--类型参数化,又称参数模板 使得程序(算法 ...
- java中利用hanlp比较两个文本相似度的步骤
使用 HanLP - 汉语言处理包 来处理,他能处理很多事情,如分词.调用分词器.命名实体识别.人名识别.地名识别.词性识别.篇章理解.关键词提取.简繁拼音转换.拼音转换.根据输入智能推荐.自定义分词 ...