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 ...
随机推荐
- python之scrapy携带Cookies模拟登陆
知识点 """ scrapy两种模拟登陆: 1.直接携带cookie 2.找到发送post请求的url地址,带上信息,发送请求 应用场景: 1.cookie过期时间很长, ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-3.微信网站扫码支付介绍
笔记 3.微信网站扫码支付介绍 简介:讲解微信网页扫码支付 1.扫码支付文档:https://pay.weixin.qq.com/wiki/doc/api/native.php ...
- vue 组件属性props,特性驼峰命名,连接线使用
网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...
- powershell自动添加静态IP
声明:其中脚本有参考其他作者,由于当时参考仓促,未能把作者一一列出,有机会会再找出原作者文件链接并附上,请见谅 参考: https://ss64.com/nt/netsh.html https://w ...
- vs把asp.net旧的项目名称全部修改
1 先打开项目,把名称全部替换掉,然后把解决方案,程序集名称全部替换掉. 2 重新生成,清理,关闭项目. 3 把.sln文件用文本编辑器打开,替换里面的名称,然后把文件夹名称都修改好.d 4.打开项目 ...
- jackson对Exception类型对象的序列化与反序列化
发现问题 今天在调试系统错误通知的时候遇到了一个问题.我们在系统异常时候要通过队列系统发送各种通知到团队内部成员. 因此我写了一个通用接口.接口中有传递Exception对象到队列中,再由队列消费者解 ...
- NetCore 对Json文件的读写操作
nuget Microsoft.Extensions.Configuration; Microsoft.Extensions.Configuration.Json; Newtonsoft.Json; ...
- 架构模式: Saga
架构模式: Saga 上下文 您已应用每服务数据库模式.每个服务都有自己的数据库.但是,某些业务事务跨越多个服务,因此您需要一种机制来确保服务之间的数据一致性.例如,假设您正在建立一个客户有信用额度的 ...
- 安装nova
在控制节点上执行 controllerHost='controller' controllerIP='172.31.240.49' MYSQL_PASSWD='m4r!adbOP' RABBIT_PA ...
- 版权动态日记页脚 JS
关键代码如下 <script>document.write(new Date().getFullYear())</script> js方法 new Date() //实例化Da ...