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 ...
随机推荐
- 使用KerasNet
1.安装Python3.6,必须是3.6因为当前KerasNet的配套版本是3.6 https://www.python.org/ftp/python/3.6.8/python-3.6.8-amd64 ...
- python 实例方法、类方法和静态方法
#!/usr/bin/env python3.6 #-*- coding:utf-8 -*- # class Person(object): city = 'Beijing' def __init__ ...
- 1. hadoop使用启动命令时报错之分析解决
今天在学习hadoop启动命令的时候,先jps看了下,发现namenode.datanode都开着,所以想要先停止这些服务,结果输入命令后报错:“WARN util.NativeCodeLoader: ...
- const成员变量
#include <iostream> using namespace std; class A { public: A(int size) : SIZE(size) {}; privat ...
- (转载)PIM-SM协议初探（一）路由角色选举
PIM是Protocol Independent Multicast(协议无关组播)的简称,表示可以利用静态路由或者任意单播路由协议(包括RIP.OSPF.IS-IS.BGP等)所生成的单播路由表为I ...
- 使用Visual Studio Code Coverage和nunit上传单元测试覆盖率和单元测试结果到SonarQube上
SonarQube.Scanner.MSBuild.exe begin /k:"OMDCCQuotes" /d:sonar.host.url="http://myip:9 ...
- jQuery代码书写规范
1. 对于同一个对象不超过三个操作的,可以直接写成一行 $("li").show().unbind("click"); 2. 对于同一个对象的较多操作,建议每行 ...
- USACO 1.2 Friday the Thirteenth
注意闰月的部分细节很多. /* ID:Starry21 LANG:C++ TASK:friday */ #include<iostream> #include<string> ...
- kubeadm快速安装k8s
1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@localhost ~]# systemc ...
- java ThreadGroup 作用 方法解析（转）
ThreadGroup线程组,java对这个类的描述呢就是“线程组表示一组线程.此外,线程组还可以包括其他线程组.线程组形成一个树,其中除了初始线程组之外的每个线程组都有一个父线程组.允许线程访问关于 ...