<!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. linux下如何映射宿主机中的文件到容器中?

    答:在启动容器时使用-v指定宿主机目录和要映射到的容器内部目录,语法如下: docker run -it -v <host_dir>:<container_dir> <c ...

  2. LC 969. Pancake Sorting

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...

  3. rally task配置文件

    rally task配置文件 Rally本身提供了一些task配置文件,用于提供测试用例中所需的信息包括场景测试中所传入的参数.运行方式是并行还是串行,context等信息.Rally本身提供的tas ...

  4. 利用Spring的AbstractRoutingDataSource解决多数据源的问题【代码手动切换，非AOP】

    转: 利用Spring的AbstractRoutingDataSource解决多数据源的问题 多数据源问题很常见,例如读写分离数据库配置. 原来的项目出现了新需求,局方要求新增某服务器用以提供某代码, ...

  5. Heartbeat实现web服务器高可用

    一.Heartbeat概述: Heartbeat的工作原理:heartbeat最核心的包括两个部分,心跳监测部分和资源接管部分,心跳监测可以通过网络链路和串口进行,而且支持冗余链路,它们之间相互发送报 ...

  6. 新股定价谁说了算？一文读懂中国IPO询价制度

    总体来说,在市场化条件下,确定股票首次公开发行的价格可以分为两个步骤:一是股票估值:选择一定的股票估值模型,对拟发行股票的公司进行估值,并初步确定发行价格和询价区间:二是发现股票市场价格,主要方式是I ...

  7. React Native小知识点记录

    1>查看 RN 的所有历史版本: npm view react-native versions -json 2>查看 RN 的当前版本: npm view react-native ver ...

  8. MySQL常用维护命令和操作

    MySQL数据库安装后,除了包括MySQL服务器进程管理外,还提供了大量工具用于管理和维护MySQL服务器的其它工作.下面PHP程序员雷雪松介绍的这些命令都是在MySQL交互界面以外的命令行中执行的. ...

  9. python基础知识（字典）

    创建字典 变量名 = {key:value,.....} zip()    转换为zip对象 空字典 变量名 = {} 变量名 = dict(key = value,....) 创建只有键的字典 fr ...

  10. javaweb期末项目-stage1-part2-UML设计

    UML设计.rar-下载 说明:解压密码为袁老师全名拼音(小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish/p/10828672.html 需求分析:h ...