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 ...
随机推荐
- delphi 需要应用一个单元是，需要在工程里面先添加单元
delphi 需要应用一个单元是,需要在工程里面先添加单元
- Webupload+PHP上传大文件
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- Python实现的计算马氏距离算法示例
Python实现的计算马氏距离算法示例 本文实例讲述了Python实现的计算马氏距离算法.分享给大家供大家参考,具体如下: 我给写成函数调用了 python实现马氏距离源代码: # encod ...
- (转载)悟透JavaScript
引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个 ...
- AC自动机--summer-work之我连模板题都做不出
这章对现在的我来说有点难,要是不写点东西,三天后怕是就一无所有了. 但写这个没有营养的blog的目的真的不是做题或提升,只是学习学习代码和理解一些概念. 现在对AC自动机的理解还十分浅薄,这里先贴上目 ...
- maven-tomct插件
依赖 <dependency> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomca ...
- Docker save and load镜像保存
持久化docker的镜像或容器的方法 Docker的镜像和容器可以有两种方式来导出 docker save #ID or #Name docker export #ID or #Name docker ...
- Vuex模块：开启命名空间
模块开启命名空间后,享有独自的命名空间. { "模块1":{ state:{}, getters:{}, mutations:{}, actions:{} }, "模块2 ...
- STS中AOP的实现
1. 在pom.xml中加入aop依赖: <groupId>org.springframework.boot</groupId> <artifactId>sprin ...
- deepin终端下载速度超慢解决方案
最近发现在deepin终端下载软件包时速度简直是慢到不可饶恕,最快速度不上20KB/s,哭了,这要下载个几百KB的还能忍,稍微下载个百内MB的包就得等1-2小时,这咋行! 在网上查了几篇博客后,终于找 ...