Vue实现添加、删除、关键字查询
从今天开始，将不定期更新关于 Vue 的学习以及各种方法的使用，好了，下面就开始吧
Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue，我为了省事就...)，然后在HTML中定义一个 id 为 app 的 div ,这里定义的 id 是看你的个人喜好了，只要和后面我们在 script 标签内一直即可
下面是一个简单的小例子，实现 列表的添加、删除、关键字查询
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<script src="./lib/vue.js"></script>
<link rel="stylesheet" href="./css/home.css">
<link rel="stylesheet" href="./css/bootstrap.css">
</head> <body>
<div id="app">
<!-- 实现添加 删除 功能 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">添加人物信息</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" v-model="id" class="form-control">
</label>
<label>
Name:
<input type="text" v-model="name" class="form-control">
</label>
<label>
Age:
<input type="text" v-model="age" class="form-control">
</label>
<label>
Gender:
<input type="text" v-model="gender" class="form-control">
</label>
<label>
<input type="button" @click="add" value="添加" class="btn btn-primary">
</label>
<label>
关键字搜索：
<input type="text" v-model="keywords" placeholder="输入关键字搜索" class="form-control">
</label>
</div>
</div> <table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>登记时间</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div> <script src="./js/home.js"></script> </body> </html>
var vm = new Vue({//js
el: "#app",
data: {
id: "",
name: "",
age: "",
gender: "",
ctime: "",
keywords: "",
list: [
{ id: 1, name: "tom", age: 20, gender: "男", ctime: new Date() },
{ id: 2, name: "jam", age: 30, gender: "男", ctime: new Date() },
{ id: 3, name: "mark", age: 18, gender: "女", ctime: new Date() },
]
},
methods: {
add() {//添加列表信息
var addList = { id: this.id, name: this.name, age: this.age, gender: this.gender, ctime: this.ctime };
this.list.push(addList);
this.id = this.name = this.age = this.gender = this.ctime = "";
},
del(id) {//删除列表信息
//第一种方法
// some 方法返回 boolean 值，不是筛选一个新的数组，而是筛选有没有符合条件的值，只要有一个值符合条件则立即返回 true，不再执行后续操作（循环），否则返回 false
// this.list.some((item, i) => {
// if (item.id == id) {
// this.list.splice(i, 1);
// return true;
// }
// });
//第二种方法
var index = this.list.findIndex(item => {
if (item.id == id) {
return true
}
})
this.list.splice(index, 1)
},
search(keywords) {//通过关键字搜索
//第一种方法
// var newList=[];
// this.list.forEach(item =>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// });
// return newList;
//第二种方法
//filter方法是数组的过滤方法，返回一个新的数组，不会对原数组修改，return true 为想要的值，return false 则为去掉的值
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
Vue实现添加、删除、关键字查询的更多相关文章
- centos7 lvm合并分区脚本初探-linux性能测试 -centos7修改网卡名字-jdk环境安装脚本-关键字查询文件-批量添加用户
1.#!/bin/bash lvmdiskscan | grep centos > /root/a.txt a=`sed -n '1p' /root/a.txt` b=`sed -n '2p' ...
- Sql批量添加，批量查询，批量删除，批量修改。mybatis都有对应标签
Sql批量添加,批量查询,批量删除,批量修改.mybatis都有对应标签
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- vue简单案例_动态添加删除用户数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- SQL语句添加删除修改字段及一些表与字段的基本操作
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200)2.删除字段 ALTER TABLE table_NA ...
- WebService的简单运用添加删除
WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示X ...
- T-SQL动态查询（2）——关键字查询
接上文:T-SQL动态查询(1)--简介 前言: 在开发功能的过程中,我们常常会遇到类似以下情景:应用程序有一个查询功能,允许用户在很多查询条件中选择所需条件.这个也是本系列的关注点. 但是有时候你也 ...
随机推荐
- EntityFramework 学习 一 Lazy Loading 1
延迟加载:延迟加载相关的数据 using (var ctx = new SchoolDBEntities()) { //Loading students only IList<Student&g ...
- Win7.窗口自动滚动回到屏幕
PS:笔记本 ThinkPad E440 1.前提:窗口 的一部分位于在屏幕的外面,此窗口处于激活的状态 操作:鼠标放置在窗口内部,鼠标继续往屏幕外部移动,鼠标没有任何其他事件(只有 MouseMov ...
- Spark- SparkStreaming可更新状态的实例
Producer package zx.zx.sparkkafka import java.util.Properties import kafka.producer.{KeyedMessage, P ...
- Hadoop- DistCp(分布式拷贝)
在实际的生产环境中,我们的企业都有测试集群和生产集群,有的比较大型的企业有多个版本的Hadoop 大数据集群,这时候有个这样的需求,各个集群上的资源需要进行迁移,比如说一些生产集群需要一些测试集群的数 ...
- BZOJ 3357 [Usaco2004]等差数列：map优化dp
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3357 题意: 给你n个数a[i],让你找出一个最长的是等差数列的子序列. 题解: 表示状态 ...
- mysql 如何创建索引
mysql 如何创建索引 一.总结 一句话总结:MySQL中可以使用alter table这个SQL语句来为表中的字段添加索引. 使用alter table语句来为表中的字段添加索引的基本语法是:AL ...
- Saiku_00_资源帖
一.精选 1.李秋 随笔分类 - pentaho 二.概述 1.Saiku + Kylin 多维分析平台探索 三.Saiku+Kylin 1.使用Saiku+Kylin构建多维分析OLAP平台 2.使 ...
- 把自定义的demuxer加入ffmpeg源码
.简介:把上一篇文章中的demuxer加入ffmpeg源码中去,使可以用命令行方式调用自定义的demuxer 第一步: 在libavformat目录下新建mkdemuxer.c和mkdemuxer.h ...
- Python Class 的实例方法/类方法/静态方法
实例方法.类方法.静态方法 class MyClass(object): class_name = "MyClass" # 类属性, 三种方法都能调用 def __init__(s ...
- Oracle 12c 多租户 CDB 与 PDB 备份
一. CDB 备份 1.1 只备份CDB 只备份CDB数据库需要具有SYSDBA或SYSBACKUP权限用户连接到CDB的root环境下,执行backupdatabase root命令即可完成对C ...