vue学习（3）-增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</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> <input type="button" value="添加" @click="add" class="btn btn-primary"> <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>
<!--如果要查找的话，数组名就不能写死-->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<!--传空字符串,不能不传-->
<td>{{ item.ctime | dateFormat('') }}</td>
<td>
<!-- .prevent 阻止默认行为，防止刷新-->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div> <div id="app2">
<p>{{ dt | dateFormat('') }}</p>
</div> <script>
// 全局过滤器
Vue.filter('dateFormat', function (dateStr,pattern) {
var dt = new Date(dateStr); var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate(); // return `${y}-${m}-${d}`;
// return dt.toLocaleDateString(); if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
}else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds(); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}); // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',//搜索的关键词
list:[
{id: 1, name:'benz', ctime: new Date()},
{id: 2, name:'baoma', ctime: new Date()}
]
},
methods: {
add() {
var car = { id: this.id, name: this.name,ctime: new Date()};
this.list.push(car);
},
del(id) {
this.list.some((item, i) => {
if (item.id === id){
this.list.splice(i, 1);
//在数组 some 方法中，只要return true，就会立即终止这个数组的后续循环
return ture;
} })
},
search(keywords) {
// var newList = [];
// this.list.forEach(item => {
//如果查找不到就返回-1
//查找的为空，就返回 0
// if (item.name.indexOf(keywords) != -1){
// newList.push(item);
// }
// });
// return newList // forEach some filter findIndex 数组遍历的方法
return newList = this.list.filter(item => {
//String.prototype.includes('要包含的字符串')
//如果包含 返回true
//jQuery中有个方法$("p:contain(is)")类似
if (item.name.includes(keywords)){
return item;
}
}) }
}
}); //定义私有的过滤器
var vm2 = new Vue({
el: '#app2',
data: {
dt:new Date()
},
methods: { },
//过滤器，方法都是对象
//过滤器调用采用就近原则，如果全局和私有的名称一致了，优先调用私有的过滤器
filters: {
dateFormat: function (dateStr, pattern = '') {
var dt = new Date(dateStr); var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate(); if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds(); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; }
}
}
})
</script> </body>
</html>
按关键词查找：
vue学习（3）-增删改查的更多相关文章
- ABP+NetCore+Vue.js实现增删改查
ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...
- 一起学Vue：CRUD(增删改查)
目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...
- JDBC学习笔记——增删改查
1.数据库准备 要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_I ...
- jdbc编程学习之增删改查（2）
一,enum类型的使用 在SQL中没有布尔类型的数据,我们都使用过布尔类型,当属性的值只用两种情况时.例如性别等.那在数据库对这些属性的值个数比较少时我们应该使用什么数据类型呢?SQL给我们提供了枚举 ...
- MongoDB学习之--增删改查（1）
本文是对mongodb学习的一点笔记,主要介绍最简单的增删改操作,初学,看着API,有什么错误,希望大家指正:(使用官方驱动) 1.增 增加操作是最简单的,构造bsonDcument插入即可: 方式1 ...
- MongoDB学习之--增删改查（2）
昨天简单介绍了官方驱动操作MongoDB进行增删查操作的,今天继续介绍更新操作..... 方法简介 官方驱动中更新操作使用collection的Update方法,有泛型和非泛型两个版本: 其签名如下( ...
- Vue表格数据增删改查及搜索
<div id="app"> <div class="item"> <span class="name"> ...
- 二、Django学习之增删改查
增加数据 第一种方式 def index(request): #创建记录方式1 #实例化要添加的记录(对象) student_obj = models.Student( name='dazhuang' ...
- Vue.js——3.增删改查
vue 写假后台 bootstrap 做的样式 代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue+element基本增删改查
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 魔法方法 __slots__ 方法
场景解析 网游的用户, 大量的用户本质都是类的实例化对象, 在线人数百万级时对内存是很大的挑战, 如何减少这部分的内存 方法解析 __slots__ 方法 取消默认的类实例中的 __dict__ ...
- JVM 内存溢出（转载～）
对于JVM的内存写过的文章已经有点多了,而且有点烂了,不过说那么多大多数在解决OOM的情况,于此,本文就只阐述这个内容,携带一些分析和理解和部分扩展内容,也就是JVM宕机中的一些问题,OK,下面说下O ...
- Spring Cloud(2)：服务发现（Eureka）
Spring Cloud Eureka是Spring Cloud Netflix项目下的一个模块,作用是服务的注册和发现,并实现服务治理.它有一个(或一组,以实现高可用)服务注册中心(eureka s ...
- vscode中如何加eslint检查工具
代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题.除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风 ...
- C#中？的相关使用
C#中?的相关使用 今天看了几篇博客,学习了一下与?相关的使用,大致分为一下几种: 1. 可空类型 看标题就能够很好的理解这个概念:可以为空的类型.而在C#中可以为空也就是null的类型,都是引用类型 ...
- deepin终端下载速度超慢解决方案
最近发现在deepin终端下载软件包时速度简直是慢到不可饶恕,最快速度不上20KB/s,哭了,这要下载个几百KB的还能忍,稍微下载个百内MB的包就得等1-2小时,这咋行! 在网上查了几篇博客后,终于找 ...
- 《精通并发与Netty》学习笔记（01 - netty介绍及环境搭建）
一.Netty介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. ...
- GPD mircoPC linux系统安装
前言 GPD 全称GamePad Digital, 深圳市中软赢科技术有限公司持有的品牌,其主要生产掌机,最近开始涉足办公级UMPC.其中有款UMPC--mircoPC堪称神作.接口齐全,黑大粗,耐操 ...
- 数据结构与算法-stack
栈的本质是一种线性表,特殊的一种线性表 基本概念 概念 栈是一种特殊的线性表 栈仅能在线性表的一端进行操作 栈顶(Top):允许操作的一端 栈底(Bottom):不允许操作的一端 stack是一种线性 ...
- 蓝鲸智云安装proxy和p-agent过程记录
1.agent_setup_pro.sh: no such file or directory 2.参考:https://bk.tencent.com/s-mart/community/questio ...