<!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）-增删改查的更多相关文章

  1. ABP+NetCore+Vue.js实现增删改查

    ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...

  2. 一起学Vue：CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  3. JDBC学习笔记——增删改查

    1.数据库准备  要用JDBC操作数据库,第一步当然是建立数据表: ? 1 2 3 4 5 6 CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_I ...

  4. jdbc编程学习之增删改查（2）

    一,enum类型的使用 在SQL中没有布尔类型的数据,我们都使用过布尔类型,当属性的值只用两种情况时.例如性别等.那在数据库对这些属性的值个数比较少时我们应该使用什么数据类型呢?SQL给我们提供了枚举 ...

  5. MongoDB学习之--增删改查（1）

    本文是对mongodb学习的一点笔记,主要介绍最简单的增删改操作,初学,看着API,有什么错误,希望大家指正:(使用官方驱动) 1.增 增加操作是最简单的,构造bsonDcument插入即可: 方式1 ...

  6. MongoDB学习之--增删改查（2）

    昨天简单介绍了官方驱动操作MongoDB进行增删查操作的,今天继续介绍更新操作..... 方法简介 官方驱动中更新操作使用collection的Update方法,有泛型和非泛型两个版本: 其签名如下( ...

  7. Vue表格数据增删改查及搜索

    <div id="app"> <div class="item"> <span class="name"> ...

  8. 二、Django学习之增删改查

    增加数据 第一种方式 def index(request): #创建记录方式1 #实例化要添加的记录(对象) student_obj = models.Student( name='dazhuang' ...

  9. Vue.js——3.增删改查

    vue  写假后台  bootstrap 做的样式 代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. Vue+element基本增删改查

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Graphics 使用一点点注意

    Form_Load 事件下绘制的结果会被 paint 刷新掉.也就等于没有绘制一样. Graphics g = this.CreateGraphics(); g.DrawRectangle(new P ...

  2. [Spark] Spark 3.0 Accelerator Aware Scheduling - GPU

    Ref: Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU) 预览版本:https://archive.apache.org/dist/spark/spark-3.0.0-p ...

  3. Scala语法04 - 其他

  4. Linux系统管理_主题02 ：管好文件（1）_2.4 链接文件_ln

    在 Linux 中,链接有两种:符号链接(symbolic link)和硬链接(hard link).  删除一个符号链接不会影响到这个符号链接指向的目标文件或目 录:  反过来,删除.移动或者重 ...

  5. Pycharm 编辑器快捷键

    必备技能:IDEA一定要懂的32条快捷键 这些IntelliJ IDEA键盘快捷键可以让你专注于编写代码,让你的双手在键盘上起舞. 1,搜索文件名: ↑   Shift 快速连续按两下 2,显示便捷提 ...

  6. Linux命令集锦：crontab命令

    Linux crontab是用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crontab命令每分钟会定期检查是否有要执行的工作,如果有要执行的工作便会自动执行该工作. 而 ...

  7. Canal——增量同步MySQL数据到ElasticSearch

    1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本:       Kibana:6.x版本:     Canal.deployer:1 ...

  8. React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`

    使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有  ...

  9. CentOS7安装openjdk8+环境变量配置

    CentOS7安装openjdk8+环境变量配置 步骤: 使用yum命令安装openjdk yum clean yum install -y java-1.8.0-openjdk-1.8.0.212. ...

  10. DRF视图-基类

    2个视图基类 REST framework 提供了众多的通用视图基类与扩展类,以简化视图的编写. 为了区分上面请求和响应的代码,我们再次创建一个新的子应用: python manage.py star ...