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

效果图：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <title>简单用户管理</title>
  5.      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  6.      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.  </head>
  8.  
  9.  <body>
  10.      <div id="app">
  11.          <div class="panel panel-success">
  12.              <div class="panel-heading">
  13.                  <h3 class="panel-title">基于vue.js的简单用户管理</h3>
  14.              </div>
  15.              <div class="panel-body form-inline ">
  16.                  <label>id:
  17.                      <input type="text" class="form-control" v-model="id">
  18.                  </label>
  19.                  <label>name:
  20.                      <input type="text" class="form-control" v-model="name">
  21.                  </label>
  22.                  <button class="btn btn-primary" @click="add()">Create</button>
  23.                  <label>search:
  24.                      <input type="text" class="form-control" v-model="keywords">
  25.                  </label>
  26.              </div>
  27.          </div>
  28.  
  29.          <table class="table table-hover table-bordered table-striped">
  30.              <thead>
  31.                  <tr>
  32.                      <th>id</th>
  33.                      <th>name</th>
  34.                      <th>time</th>
  35.                      <th>Operation</th>
  36.                  </tr>
  37.              </thead>
  38.              <tbody>
  39.                  <tr v-for="list in search(keywords)" :key="list.id">
  40.                      <td>{{list.id}}</td>
  41.                      <td>{{list.name}}</td>
  42.                      <td>{{list.time | dateFormat() }}</td>
  43.                      <td>
  44.                          <a href="" @click.prevent="del(list.id)">Delete</a>
  45.                      </td>
  46.                  </tr>
  47.              </tbody>
  48.          </table>
  49.      </div>
  50.  </body>
  51.  
  52.  <script>
  53.  
  54.      // 全局的过滤器， 进行时间的格式化
  55.      // 所谓的全局过滤器，就是所有的VM实例都共享的
  56.      Vue.filter('dateFormat', function (dateStr, pattern = "") {
  57.          // 根据给定的时间字符串，得到特定的时间
  58.          var dt = new Date(dateStr)
  59.          //   yyyy-mm-dd
  60.          var y = dt.getFullYear()
  61.  
  62.          var d = dt.getDate()
  63.          // return y + '-' + m + '-' + d
  64.          if (pattern.toLowerCase() === 'yyyy-mm-dd') {
  65.              return `${y}-${m}-${d}`
  66.          } else {
  67.              var hh = dt.getHours()
  68.              var mm = dt.getMinutes()
  69.              var ss = dt.getSeconds()
  70.              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  71.          }
  72.      })
  73.  
  74.      new Vue({
  75.          el: '#app',
  76.          data: {
  77.              id: "",
  78.              name: "",
  79.              keywords: "",
  80.              lists: [
  81.                  { id: , name: "Jacking", time: new Date() },
  82.                  { id: , name: "zhangs", time: new Date() },
  83.                  { id: , name: "bill", time: new Date() }
  84.              ]
  85.          },
  86.          methods: {
  87.              del(id) {
  88.                  // this.lists.some((item, i) => {
  89.                  //     if (item.id = id) {
  90.                  //         this.lists.splice(i,1)
  91.                  //         return true;
  92.                  //     }
  93.                  // })
  94.  
  95.                  var index = this.lists.findIndex(item => {
  96.                      if (item.id == id) {
  97.                          return true;
  98.                      }
  99.                  })
  100.                  )
  101.              },
  102.              add() {
  103.                  var flag = true;
  104.                  this.lists.forEach(element => {
  105.                      if (element.id == this.id) {
  106.                          alert("该id已存在，请重新输入！");
  107.                          flag = false;
  108.                      }
  109.                  });
  110.                  if (!flag) {
  111.                      this.id = ""
  112.                      return false;
  113.                  }
  114.                  var list = { id: this.id, name: this.name, time: new Date() };
  115.                  this.lists.push(list);
  116.                  this.id = this.name = "";
  117.              },
  118.              // 过滤lists中的数据，返回一个新的数组
  119.              search(keywords) {
  120.                  var newList = [];
  121.                  this.lists.forEach(element => {
  122.                      ) {
  123.  
  124.                          newList.push(element);
  125.                      }
  126.                  });
  127.                  return newList;
  128.  
  129.                  // return this.lists.filter(item => {
  130.                  //     if (item.name.includes(keywords)) {
  131.                  //         return item;
  132.                  //     }
  133.                  // })
  134.              }
  135.          },
  136.          //过滤器为就近原则
  137.          filters: {
  138.              dateFormat: function (dateStr, pattern = '') {
  139.                  // 根据给定的时间字符串，得到特定的时间
  140.                  var dt = new Date(dateStr)
  141.                  //   yyyy-mm-dd
  142.                  var y = dt.getFullYear()
  143.                  ).toString().padStart(, ')
  144.                  , ')
  145.                  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
  146.                      return `${y}-${m}-${d}`
  147.                  } else {
  148.                      , ')
  149.                      , ')
  150.                      , ')
  151.                      return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
  152.                  }
  153.              }
  154.          }
  155.  
  156.      })
  157.  
  158.  </script>
  159.  
  160.  </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. Hadoop权限管理

    1.Hadoop权限管理包括以下几个模块: (1) 用户分组管理.用于按组为单位组织管理,某个用户只能向固定分组中提交作业,只能使用固定分组中配置的资源:同时可以限制每个用户提交的作业数,使用的资源量 ...

  2. 电梯调度二——曹玉松&&蔡迎盈

    电梯初步版本    经过去实际大楼的调查和一周的学习,初步完成了电梯的制作,但是这个版本的电梯功能并不是很全面,而且界面有待于改善,现在做出了测试版本,稍后进一步跟进新的版本,现在的版本初步完成的是电 ...

  3. 【JVM虚拟机】(7)---深入理解Class中-属性集合

    #[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...

  4. 从mysql中拿到的数据构造为列表

    最近测试接口遇到一个问题,用python2.7从mysql中取到的数据是元祖类型的,元祖内部的元素也是一个元祖(并且部分元素的编码格式是unicode的): 类似这样: ((10144, u''), ...

  5. c#批量抓取免费代理并验证有效性

    之前看到某公司的官网的文章的浏览量刷新一次网页就会增加一次,给人的感觉不太好,一个公司的官网给人如此直白的漏洞,我批量发起请求的时候发现页面打开都报错,100多人的公司的官网文章刷新一次你给我看这个, ...

  6. WebSocket协议详解与c++&c#实现

    摘要: 随着手机游戏.H5游戏以及微信小游戏的普及,越来越多的客户端-服务器端的通讯采用websocket协议.Websocket协议是全双工的.基于数据帧的.建立在tcp之上的长连接协议.Webso ...

  7. Java3y文章目录导航

    由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航. 想要获取最新原创的技术文章欢迎关注我的公众号:Java3y 文章目录导航:https://github.com/Z ...

  8. Typora程序员的记事本.Typora常用快捷操作

    Typora常用快捷操作 1.文本格式快捷编写 1.1.文本段落编写 a)#→宫格建→加输入内容→回车键,其中#表示标题一,##表示标题二以此类推至######为止 b)或者选中要修改文本的文本格式按 ...

  9. 全球第一免费开源ERP Odoo工业互联网生产制造功能模块术语解析

    物料清单 物料清单(BoM)用于描述物料.每种物料的数量.以及制造某一产品所需的步骤.由于行业和成品性质的不同,同一个文件可能有不同的命名.例如,在制药行业中,可以使用术语“处方”. 周期 产品周期是 ...

  10. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...