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 ...
随机推荐
- linux下如何查看当前内核的配置？
答: zcat /proc/config.gz 当然有个前提条件,需要打开内核的以下两个选项(CONFIG_IKCONFIG和CONFIG_IKCONFIG_PROC): General setup ...
- golang中mysql建立连接超时时间timeout 测试
本文测试连接mysql的超时时间. 这里的"连接"是建立连接的意思. 连接mysql的超时时间是通过参数timeout设置的. 1.建立连接超时测试 下面例子中,设置连接超时时间为 ...
- 传统Web应用请求和响应特点【显示当前时间】
(1)请求:浏览器以HTTP协议的方式提交请求到服务器 (2)响应:服务器以HTTP协议的方式响应内容到浏览器 注意:HTTP是WEB大众化非安全协议 HTTPS是WEB安全协议,是基于HTTP协议的 ...
- java常用的正则表达式的工具类
import com.google.common.base.Strings; import java.util.regex.Matcher;import java.util.regex.Pattern ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-3.在线教育站点需求分析和架构设计
笔记 3.在线教育站点需求分析和架构设计 简介:分析要开发的功能点和系统架构应该怎样架构 1.开发的功能: 首页视频列表 ...
- 在spring的业务层获取request,response
1.直接通过controller层获取到传输到业务层2.SpringMVC提供的RequestContextHolder可以直接获取代码: RequestAttributes requestAttri ...
- MySQL知识篇-SQL2
1 数据库基本操作? (1) 查看数据库 show databases; (2)切换到指定的数据库 use dbname; (3)创建数据库 create database 库名 charset=ut ...
- Vue-cli3性能优化
Vue-cli3.0的打包性能优化方案:https://juejin.im/post/5d42962be51d4561b84c00c3 提升90%加载速度——vuecli下的首屏性能优化:https: ...
- ES6中Set和Map
1.Set 实例的创建 Set实例它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数用来生成Set数据结构. Set 函数可以接受一个数组(或者具有 iterable 接口 ...
- 一篇文章带你了解SQL注入
什么是SQL注入? 原理: Web应用程序对用户输入的数据校验处理不严或者根本没有校验,致使用户可以拼接执行SQL命令 危害: 注入可能导致数据丢失泄露或数据破坏.缺乏可审计性,有时甚至能导致完全接管 ...