基于vue.js的简单用户管理
功能描述：添加、修改、搜索过滤
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<title>简单用户管理</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">基于vue.js的简单用户管理</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>
<button class="btn btn-primary" @click="add()">Create</button>
<label>search:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>time</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="list in search(keywords)" :key="list.id">
<td>{{list.id}}</td>
<td>{{list.name}}</td>
<td>{{list.time | dateFormat() }}</td>
<td>
<a href="" @click.prevent="del(list.id)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
// 全局的过滤器， 进行时间的格式化
// 所谓的全局过滤器，就是所有的VM实例都共享的
Vue.filter('dateFormat', function (dateStr, pattern = "") {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var d = dt.getDate()
// return y + '-' + m + '-' + d
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}`
}
})
new Vue({
el: '#app',
data: {
id: "",
name: "",
keywords: "",
lists: [
{ id: , name: "Jacking", time: new Date() },
{ id: , name: "zhangs", time: new Date() },
{ id: , name: "bill", time: new Date() }
]
},
methods: {
del(id) {
// this.lists.some((item, i) => {
// if (item.id = id) {
// this.lists.splice(i,1)
// return true;
// }
// })
var index = this.lists.findIndex(item => {
if (item.id == id) {
return true;
}
})
)
},
add() {
var flag = true;
this.lists.forEach(element => {
if (element.id == this.id) {
alert("该id已存在，请重新输入！");
flag = false;
}
});
if (!flag) {
this.id = ""
return false;
}
var list = { id: this.id, name: this.name, time: new Date() };
this.lists.push(list);
this.id = this.name = "";
},
// 过滤lists中的数据，返回一个新的数组
search(keywords) {
var newList = [];
this.lists.forEach(element => {
) {
newList.push(element);
}
});
return newList;
// return this.lists.filter(item => {
// if (item.name.includes(keywords)) {
// return item;
// }
// })
}
},
//过滤器为就近原则
filters: {
dateFormat: function (dateStr, pattern = '') {
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
).toString().padStart(, ')
, ')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
, ')
, ')
, ')
return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
}
}
}
})
</script>
</html>
基于vue.js的简单用户管理的更多相关文章
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 基于Vue.js 2.0 + Vuex打造微信项目
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
随机推荐
- ll 和 ls -l的详解
ll会列出该文件下的所有文件信息,包括隐藏文件 而ls -l 只会列出显示文件 ll 命令列出的信息更加详细,有时间,是否可读写等信息 ll命令和ls -l命令结果区别: 上面结果说明: 各个字段的含 ...
- Error【0002】：YUM本地源配置问题
1.1 问题背景 通过VMware workstation创建虚拟机,在虚拟机的CDROM设备中,装载操作系统镜像.然后通过mount -o loop的方式,将CDROM设备挂载到系统的/mnt/cd ...
- appium 运行报错：...... Attempt to re-install io.appium.settings without first uninstalling解决方案
报错形式: Failed to install D:\AutoTest\appium\Appium\node_modules\appium\build\settings_apk\settings_ap ...
- python中线程和进程(二)
目录 线程同步 Event Lock RLock Condition Barrier semaphore GIL 线程同步 线程同步,即线程之间协同工作,一个线程访问某些数据时,其他线程不能访问这些数 ...
- 设计模式之行为类模式PK
行为类模式包括: 责任链模式 命令模式 解释器模式 迭代器模式 中介者模式 备忘录模式 观察者模式 状态模式 策略模式 模板方法模式 访问者模式 行为型模式涉及到算法和对象间职责的分配 行为类模式关注 ...
- 驰骋工作流引擎 -CCBPM如何自动升级
关键词:工作流引擎自动升级 工作流自动升级升级步骤设置1,CCBPM把更新分成三类, 应用程序代码更新.数据表结构更新.数据更新.2,CCBPM在您登录流程设计器时自动判断当前的版本与数据库版本是 ...
- 外呼系统APP外呼软件手机电销软件拨号销售软件功能设计
外呼系统APP外呼软件 1 系统概述 该软件系统设计功能主要为贷款.投资.资产管理等金融中介公司提供方便快捷的线上管理各类资源的一款应用软件工具. 可根据不同职位的账号登录APP来管理电话营销.客户签 ...
- SQLServer之修改数据库架构
修改数据库架构注意事项 用户与架构完全分离. ALTER SCHEMA 仅可用于在同一数据库中的架构之间移动安全对象. 若要更改或删除架构中的安全对象,请使用特定于该安全对象的 ALTER 或 DRO ...
- linux常用命令小结
其他类 clear 清屏 文件管理 chmod 修改文件权限. 常用列表: chmod +x 使文件变为可执行文件. 常用于sh脚本. touch 创建文件 tar 压缩文件操作. -zxvf, 解压 ...
- .NET Core 给使用.NET的公司所带来的机遇
今晚在余晟的微信公众号看到了一篇文章< 从.NET/C#开发的“后继无人”说起: https://mp.weixin.qq.com/s/rO2d0xZ58Z2syqT7AaNT3w>. 这 ...