<!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 品牌案例-根据关键字实现数组的过滤的更多相关文章

  1. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--10-11 跑马灯效果制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. python爬虫播放mp3

    我不明白这里出了什么问题.每次我试图在pyglet播放声音,我得到以下错误:WAVEFormatException: AVbin is required to decode compressed me ...

  2. spring-boot集成4:集成mybatis,druid和tk.mybatis

    Why mybatis? mybatis提供了ORM功能,相比于其他ORM框架,其需要编写更多的sql,也给了我们编写特殊/复杂sql和进行sql优化的机会. Why druid? Druid是阿里巴 ...

  3. Java 操作Word表格

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  4. C#吾日三省吾身

    全局变量与局部变量区别: 全局变量声明完毕后,就算不手动初始化赋值,也是有默认值的; 但是局部变量声明完毕后,如果不给它手动赋值,是无法直接使用这个变量的. 尽量避免少的装箱拆箱: ; .ToStri ...

  5. Spring Boot(2)中的yaml配置简介

    搞Spring Boot的小伙伴都知道,Spring Boot中的配置文件有两种格式,properties或者yaml,一般情况下,两者可以随意使用,选择自己顺手的就行了,那么这两者完全一样吗?肯定不 ...

  6. 菜鸟系列k8s——k8s快速入门(1)

    k8s快速入门 1.快速创建k8s集群 参考网站:https://kubernetes.io/docs/tutorials/kubernetes-basics 点击教程菜单 1. Create a C ...

  7. spring5源码分析系列(二)——spring核心容器体系结构

    首先我们来认识下IOC和DI: IOC(Inversion of Control)控制反转:控制反转,就是把原先代码里面需要实现的对象创建.依赖的代码,反转给容器来帮忙实现.所以需要创建一个容器,并且 ...

  8. (5.7)mysql高可用系列——MySQL中的GTID复制(理论篇)【转】

    转自:https://blog.csdn.net/wmq880204/article/details/53160078 一.GTID的概述: 1.全局事物标识:global transaction i ...

  9. oracle数据区间

    区是段下面的一个管理单位,一个区在物理上是一段连续的数据块. 一个数据文件有一个文件头,它用了若干个数据块,这个文件头里记录着区的分配与释放的信息.在这个文件中有些区是被使用的,有些区是空闲的. 什么 ...

  10. Storm消费Kafka提交集群运行

    1.创建拓扑,配置KafkaSpout.Bolt KafkaTopologyBasic.java: package org.mort.storm.kafka; import org.apache.ka ...