基于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的项目,直接 ...
随机推荐
- Android 7.0 存储系统—Vold与MountService分析(三)(转 Android 9.0 分析)
Android的存储系统(三) 回顾:前帖分析了Vold的main()函数和NetlinkManager的函数调用流程,截止到NetlinkHandler的创建和start()调用,本帖继续分析源码 ...
- 记录Ocelot + SignalR 多服务端测试
前言 分两个项目,一个Gatway,一个SignalR 贴代码 1.Gatway 1.引用Ocelot 2.添加一点点代码 Startup.cs 3.简单配置ocelot ocelot.json { ...
- python接口自动化(二十二)--unittest执行顺序隐藏的坑(详解)
简介 大多数的初学者在使用 unittest 框架时候,不清楚用例的执行顺序到底是怎样的.对测试类里面的类和方法分不清楚,不知道什么时候执行,什么时候不执行.虽然或许通过代码实现了,也是稀里糊涂的一知 ...
- Spring boot 继承 阿里 autoconfig 配置环境参数
前提:基于springboot 项目 1. 配置pom.xml 文件 <plugin> <groupId>com.alibaba.citrus.tool</groupId ...
- 【原】使用less实现随机下雪动画
元旦在公司撸码,想起圣诞节的摇摇乐项目有段代码挺有意思的,借着空闲的时间把代码抽出来,沉淀下经验.冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非 ...
- Unity导航 (寻路系统Nav Mesh Agent)
第一种 简单寻路 地面接触到的.到达目标点不用跳跃能够一直走路到达.场景视图中简单搭设几个物体.胶囊体为寻路者,黄球为目标点 红地板,绿色障碍物.现将地板以及障碍物选中 在检视面板设置静态为Navig ...
- SmartSql Redis 分布式缓存
安装 SmartSql.Cache.Redis Install-Package SmartSql.Cache.Redis Cache 配置 <Cache Id="T_Test.Redi ...
- Java集合 - List介绍及源码解析
(源码版本为 JDK 8) 集合类在java.util包中,类型大体可以分为3种:Set.List.Map. JAVA 集合关系(简图) (图片来源网络) List集合和Set集合都是继承Collec ...
- 访问者模式 Visitor 行为型 设计模式(二十七)
访问者模式 Visitor <侠客行>是当代作家金庸创作的长篇武侠小说,新版电视剧<侠客行>中,开篇有一段独白: “茫茫海外,传说有座侠客岛,岛上赏善罚恶二使,每隔十年 ...
- vue学习笔记4
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = ne ...