功能描述：添加、修改、搜索过滤

效果图：

 <!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的简单用户管理的更多相关文章

  1. 基于 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 时代,包括其插件在需要时就引 ...

  2. [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

  3. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

  4. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  5. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  6. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

  7. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  8. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

  9. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

随机推荐

  1. Vue-CLI和脚手架

    但我们学习Vue时,很多教程都会说到用Vue-CLI构建项目,那么什么是脚手架?什么是Vue-CLI?为什么要用脚手架,好处在哪?以及为何我们用Vue开发项目时要用到Vue-CLI? 首先,CLI为c ...

  2. HTTP协议中GET和POST区别

    GET一般用于获取和查询资源信息:POST一般用于更新信息,表示可能修改服务器上资源的请求 GET请求一般是幂等的 GET请求数据会附加在url之后,POST请求数据放到request-body中 G ...

  3. numpy C语言源代码调试（二）

    前一篇已经介绍,可以使用gdb进行调试,但是本人不太习惯gdb的文本界面,所以希望找一个比较好用的gdb的前端gui调试器. 想到的第一个是一个非常老的调试工具,DDD. DDD - Data Dis ...

  4. Boosting(提升方法)之AdaBoost

    集成学习(ensemble learning)通过构建并结合多个个体学习器来完成学习任务,也被称为基于委员会的学习. 集成学习构建多个个体学习器时分两种情况:一种情况是所有的个体学习器都是同一种类型的 ...

  5. Kubernetes Ingress Controller的使用及高可用落地

    Kubernetes Ingress Controller的使用及高可用落地 看懂本文要具备一下知识点: Service实现原理和会应用 知道反向代理原理,了解nginx和apache的vhost概念 ...

  6. 中国.NET：各地微软技术俱乐部汇总(持续更新中...)

    中国.NET:各地微软技术俱乐部汇总(持续更新中...)   本文是转载文,源地址: https://www.cnblogs.com/panchun/p/JLBList.html by ​史记微软. ...

  7. 『取巧』VS2015试用期过后 继续试用

    背景: 个人电脑 安装的 VS2015 Community 社区版. 一直用得挺好,都忘了要登录. 直到近来,30天试用期过 —— VS弹窗:要登录用户名.密码 才能继续使用. 但是,输入了无数次 邮 ...

  8. Unity C#笔记 容器类

    记录一下Unity C#常用的容器,方便写脚本时忘了容器类来查下 (- -||) 动态数组 List<T> using System.Collections.Generic; //泛型容器 ...

  9. 【学习笔记Part 2● MySQL】

    数据库 为什么要用数据库 如何去存放数据?生活中有各种各样的数据.比如说人的姓名.年龄.成绩等.平时我们记录这些信息都是记在大脑中.人的记忆力有限,不可能什么都记住.所以后来人们把数据记录在石头上–& ...

  10. AI，如何影响你在看的影视剧和综艺？

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 转自 |  涵的硅谷成长笔记(公众号ID:HanGrowth) 作者 | Han涵 前段时间,作为奥斯 ...