Vue实现静态列表增删查功能
知识点
1.双向数据绑定
2.自定义指令
3.自定义过滤器
4.v-for循环对象数组
5.ES6操作数组的新方法：forEach some filter findIndex
实现效果
页面源码
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css" />
</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"
@keyup.enter="add"
/>
</label>
<input
type="button"
value="添加"
class="btn btn-primary"
@click="add"
/>
<label>
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords" v-focus/>
</label>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- v-for中的数据默认是从data上的list直接渲染来的 -->
<!-- 现在改为动态的方法查询 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dateFormate('') }}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
// 全局自定义指令
Vue.directive('focus', {
inserted: function(el){
el.focus()
}
})
// 全局时间过滤器
Vue.filter('dateFormate', function(dateStr, pattern) {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt
.getDate()
.toString()
.padStart(2, '0')
// return `${y}-${m}-${d}`
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt
.getHours()
.toString()
.padStart(2, '0')
var mm = dt
.getMinutes()
.toString()
.padStart(2, '0')
var ss = dt
.getSeconds()
.toString()
.padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
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() {
if (this.id != '' && this.name != '') {
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = ''
this.name = ''
}
},
// 删除
del(id) {
// 方法一
/* 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) {
/*
方法1
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.includes(keywords)) {
return item
}
})
}
}
})
</script>
</body>
</html>
Vue实现静态列表增删查功能的更多相关文章
- Vue.js-简单的增删查功能
1.Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图 ...
- Vue系列之 => 结合ajax完成列表增删查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版
(课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...
- EAS开发之对已有单据的增删查改功能开发
一:对于一个已经在其他业务部门定义好的业务单元,在另一个部门新增该业务单元的增删查改操作,应该怎么做? 由于业务单元已经定义过了,所以我们不能再进行建模.定义单据ui.而是要开发出一个单据 ...
- Node.js 的学习（四）分别连接MongoDB与MySQL数据库，实现增删查改功能
一.Node.js 访问MongoDB 数据库 MongoDB 对许多平台都提供驱动可以访问数据库,如C#.Java.Node.js等. 1.1.安装MongoDB访问驱动 命令如下: 全局安装驱动: ...
- vue 中后台 列表的增删改查同一解决方案
查看 & 查询 常⻅业务列表⻚都是由 搜索栏 和 数据列表 组成. 其中: 搜索栏包含 搜索条件 . 新增 . 批量xx . 导出 等对 数据列表 全局操作功能项. 数据列表包含 分⻚ 和每条 ...
- 学习记录——使用PHP实现数据增删查改等基本功能（前后端分离）
萌新初次学习服务器端语言,分享学习经验 实现功能:1.显示数据表 2.对数据进行分页 3.对数据进行增删查改 由于本萌新采用前后端完全分离方案,所以数据传输用的ajax,为了提高代码的复用 ...
- day02 Python列表的增删查改及常用操作
列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’,12 ...
- 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时，利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记：重要语法特性
基于.net的分布式系统限流组件 在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...
- backbonejs mvc框架的增删查改实例
一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...
随机推荐
- [转帖]【我和CloudQuery 的故事】安装部署CloudQuery 初体验—-前篇
https://www.modb.pro/db/1694256553947910144 一.前言 在日常数据库运维中,为连接多种数据库,经常要安装不同的客户端,非常繁琐,且占用大量存储空间.如果能有一 ...
- [转帖]三篇文章了解 TiDB 技术内幕 - 说存储
https://cn.pingcap.com/blog/tidb-internal-1 引言 数据库.操作系统和编译器并称为三大系统,可以说是整个计算机软件的基石.其中数据库更靠近应用层,是很多业务的 ...
- [转帖]LSM树详解
https://zhuanlan.zhihu.com/p/181498475 LSM树(Log-Structured-Merge-Tree)的名字往往会给初识者一个错误的印象,事实上,LSM树并不像B ...
- [转帖]kafka搭建kraft集群模式
kafka2.8之后不适用zookeeper进行leader选举,使用自己的controller进行选举 1.准备工作 准备三台服务器 192.168.3.110 192.168.3.111 192. ...
- 给无网络的CentOS服务器下载rpm包的一个解决办法
很多公司的服务器为了安全都在内网, 是无法直接连接互联网的, 无法连接互联网就无法使用yum等的包管理器安装rpm包等. 有时候一些rpm包还是能很好的提高性能的, 所以可以使用多种方式获取rpm包进 ...
- FS OFS RS ORS
- Codeforces round 919 (div2)
Problem - A - Codeforces 暴力枚举 就可以: #include <bits/stdc++.h> #define int long long using namesp ...
- SAP标准附件-GOS(generic object service)
标准附件功能显示需要用户是 A类型 对话用户 本文介绍一个Public Class :CL_GOS_DOCUMENT_SERVICE 该类包含了创建附件,注释,URL,个人注释等方法,这些方法中都会涉 ...
- Unity字体和画面花屏处理
字体花屏和相机渲染花屏,这两者的表现有明显的差异. 字体花屏 字体花屏是持续性的,直到组件被刷新,或字体图集被刷新.目前在我们项目中当游戏启动时,就会填充游戏用到的所有字符到贴图中,所以并没有遇到此问 ...
- pymysql基本使用规则
1.执行SQL #!/usr/bin/env python # -*- coding:utf-8 -*- import pymysql # 创建连接 conn = pymysql.connect(ho ...