<!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. 【论文学习】Is the deconvolution layer the same as a convolutional layer

    结合上升采样upsample和卷积操作.Sub-piexl convolution. Efficient Sub-pixel-convolutional-layers. LR network,即低分辨 ...

  2. springmvc集成swagger

    1.保证项目为maven项目 2.导入jar包依赖 <dependency> <groupId>io.springfox</groupId> <artifac ...

  3. 1.React中的虚拟DOM

    1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...

  4. 配置cinder-backup服务使用ceph作为后端存储

    在ceph监视器上执行 CINDER_PASSWD='cinder1234!'controllerHost='controller'RABBIT_PASSWD='0penstackRMQ' 1.创建p ...

  5. C学习笔记-字符串的格式化输出和输入

    存储方式 字符串是内存中一段连续的char空间,以'\0'结尾 字符串就是0结尾的连续char的内存 '\0' <=> 0 <=> null printf函数,putchar函 ...

  6. Win7/Win2008下IIS配置Asp站点启用父路径的设置方法

    iis日志错误如下: 修改路径文件权限问题依旧. 解决方式:

  7. SpreadJS V13.0发布，聚焦表单设计与数据交互，让您的工作效率突飞猛进！

    纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...

  8. mybatis报错无法扫描到xml文件

    错误:java.io.IOException: Could not find resource com/xxx/xxxMapper.xml 原因:target目录下没有***.xml文件 解决方法:在 ...

  9. 什么是分析型数据库PostgreSQL版

    分析型数据库PostgreSQL版(原HybridDB for PostgreSQL)为您提供简单.快速.经济高效的 PB 级云端数据仓库解决方案.分析型数据库PostgreSQL版 兼容 Green ...

  10. STL queue 常见用法详解

    <算法笔记>学习笔记 queue 常见用法详解 queue翻译为队列,在STL中主要则是实现了一个先进先出的容器. 1. queue 的定义 //要使用queue,应先添加头文件#incl ...