<!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. 用hugo搭建个人博客

    这几天研究了用hugo搭建个人博客. 简单的整理了一下. 1.安装hugo(windows 请查看官网介绍 https://gohugo.io/getting-started/installing/) ...

  2. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  3. 深度学习之加载VGG19模型获取特征图

    1.加载VGG19获取图片特征图 # coding = utf-8 import tensorflow as tf import numpy as np import matplotlib.pyplo ...

  4. Netflix Zuul

    Zuul 是在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架.Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的前门. ApiGateway服务器 1.pom &l ...

  5. Requests API

    Requests API http://docs.python-requests.org/en/latest/ requests的具体安装过程请看: http://docs.python-reques ...

  6. 安装最新docker-ce失败解决

    报错 下载 检查本地是否已经安装 rpm -qa |grep containerd.io 如果有低版本的,卸载即可. 安装新版的containerd.io软件包 wget https://downlo ...

  7. JavaScript中函数文档注释

    /** 方法说明 * @method 方法名 * @for 所属类名 * @param{参数类型}参数名 参数说明 * @return {返回值类型} 返回值说明 */

  8. Postman配置环境变量添加token

    postman测试接口时,每次都需要获取token以后,复制到接口里,特别复杂. 这里通过把获取token接口的返回数据添加到环境变量,然后将环境变量名设置在其他接口的token中,获取一次token ...

  9. 3分钟Markdown快速入门与使用

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 注意:图片为效果图 1 标题 #开头代表标题,几个#号代表几级,最高支持六级标题 ...

  10. Linux核心系统命令

    关机,重启: shutdown -h now:关机 shutdown -r now:重启 文件和目录操作命令: pwd:显示当前所在路径 cd:切换目录 cd - :切换到上一次所在路径 cd ~:切 ...