<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="vue.js"></script>

    <title>Document</title>

</head>

<body>

    <!-- v-bind 属性绑定 -->

    <!-- v-on 事件绑定事件 -->

    <div id="app">

        <!-- <p>{{ message }}</p> -->

        <!-- <input type="button" value="按钮" :title="misss" @click="show">  -->

         <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:

                        <!-- @keyup.enter针对键盘事件的 -->

                        <input type="text" class="form-control" v-model="name" @keyup.f2 ='add'>

                    </label>

                    <input type="button" value="添加" class="btn btn-primary" @click='add'>

                    <label>

                       搜索关键字:

                        <input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">

                    </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,index) in seach(keywords)" :key='item.id'>

                    <td>{{ item.id }}</td>

                    <td>{{ item.name }}</td>

                    <td>{{ item.time | times }}</td>

                    <td>

                        <a href="" @click.prevent='del(item.id)'>删除</a>

                    </td>

                </tr>

            </tbody>

        </table>

      </div>

</body>

<script>

  //全局过滤器

  //padStart是es6中的填充字符串

  Vue.filter('times', function(data, quanstime=''){

    let ds = new Date(data)

    var y = ds.getFullYear()

    var m = (ds.getMonth() + 1).toString().padStart(2,'0')

    var d = ds.getDate().toString().padStart(2,'0')

    //toLowerCase把所有的字符串转化成小写

    if(quanstime.toLowerCase()=== 'yyyy-mm-dd'){

        return  `${y}-${m}-${d}`

    }else{

        var hh = ds.getHours().toString().padStart(2,'0')

        var mm = ds.getMinutes().toString().padStart(2,'0')

        var ss = ds.getSeconds().toString().padStart(2,'0')

        return  `${y}-${m}-${d} ${hh}:${mm}:${ss}`

    }

  })

  //自定义键盘码 Vue.config.keyCodes

  Vue.config.keyCodes.f2 = 113

  //自定义全局指令指令  Vue.directive()是自定义指令的方法

  //参数一：是指令名称，

  //参数二：是一个对象，这个对象身上，有一些指令的相关的函数，这些函数可以在特定的阶段，执行相关的操作

  Vue.directive('focus', {

      //  每当指令绑定到元素上的时候，会立即执行这个bind的函数，只执行一次

      bind: function(){

      },

      // 表示元素插入到DOM中的时候，会执行inserted函数

      inserted:function(el){

        el.focus()

      },

      //   当VNode更新的时候，会执行updated，可能触发多次

      updated:function() {

      },

  })

  //修改输入框的颜色

  Vue.directive('color',{

      bind:function(el, binding){

        el.style.color = binding.value

      }

  })

new Vue({

    el:'#app',

    data:{

        id:"",

        name:"",

        // message:"woaini",

        // misss:"点一点",

        keywords:'',

        list:[

            {id:1,name:'宝马',time: new Date() },

            {id:2,name:'奔驰',time: new Date() }

        ],

    },

    methods: {

        // 添加

        add(){

            let car = {id:this.id, name:this.name,time:new Date()}

            if(this.id != 0 || this.name != 0){

                this.list.push(car)

            }

        },

        // 删除

        // del(id){

        //      this.list.some((item, i) => {

        //       if(item.id === id){

        //         this.list.splice(i, 1)

        //        return true;

        //       }

        //      })

        // },

         // 删除

        del(id){

             var index = this.list.findIndex((item, i) => {

              if(item.id === id){

                 return true;

              }

             })

             this.list.splice(index, 1)

        },

        //搜索

        // seach(keywords){

        //     let  newList = []

        //     this.list.forEach(item => {

        //         if(item.name.indexOf(keywords) != -1){

        //             newList.push(item)

        //         }

        //     });

        //     return newList;

        // }

        //forEach some filter（过滤）  findIndex（查找索引值）  都是属于数组的新方法

        //都会对每个数组进行遍历，执行相关的操作

        //搜索

        seach(keywords){

             return this.list.filter(item =>{

                 //es6中新提供的字符串的方法 includes(要包含字符串)，如果包含则返回true，

                 if(item.name.includes(keywords)){

                        return item

                 }

             })

         }

          //过滤器的定义语法

         //Vue.filter("过滤器的名称"， function(指定参数，随意参数){})

    },

})

</script>

</html>

vue的品牌添加与筛选的功能集合的更多相关文章

  1. vue.js代码开发最常见的功能集合

    1:点击新增按钮跳出新页面 <span class="inquire" @click="addNew">新增</span> 在方法中,添 ...

  2. Excel 2010 最熟悉的陌生功能：筛选器(将当前所选内容添加到筛选器)

    使用excel2010版的同学,在进行筛选时,肯定都对这句话很熟悉:将当前所选内容添加到筛选器.但很多同学天天看到,却不知道什么是筛选器?它有什么作用. 其实,这里所指的筛选器就是储存筛选结果的一个虚 ...

  3. 循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...

  4. spring boot+vue实现H5聊天室客服功能

    spring boot+vue实现H5聊天室客服功能 h5效果图 vue效果图 功能实现 spring boot + webSocket 实现 官方地址 https://docs.spring.io/ ...

  5. 为现有图像处理程序添加读写exif的功能

    为现有图像处理程序添加读取exif的功能 exif是图片的重要参数,在使用过程中很关键的一点是exif的数据能够和图片一起存在.exif的相关功能在操作系统中就集成了,在csharp中也似乎有了实现. ...

  6. FastReport 中添加二维码功能.(Delphi)

    http://www.cnblogs.com/fancycloud/archive/2011/07/24/2115240.html FastReport 中添加二维码功能.(Delphi)   在实际 ...

  7. [原] XAF 添加日期筛选下拉选择

    1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...

  8. phpcms 移植【添加相关文章】功能

    添加相关文章功能相当有用,移植一个过来基本上可以实现比较复杂的页面内包含分类功能,做二次开发时可以省下不少力气. 用例:如果一个产品,属于一个厂家,而这个厂家是动态添加的,既不是一个分类,而是一个厂家 ...

  9. TogetherJS – 酷！在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

随机推荐

  1. HDU 5183 Negative and Positive (NP) (手写哈希)

    题目链接:HDU 5183 Problem Description When given an array \((a_0,a_1,a_2,⋯a_{n−1})\) and an integer \(K\ ...

  2. python 装饰器 第六步：带有收集参数的函数的装饰器

    #第六步:带有收集参数的函数的装饰器 #装饰器函数 def kuozhan(func): #内部函数(扩展之后的eat函数) def neweat(*w,**n): #以下三步就是扩展之后的功能,于是 ...

  3. Java并发AtomicReference类

    java.util.concurrent.atomic.AtomicReference类提供了可以原子读取和写入的底层对象引用的操作,还包含高级原子操作. AtomicReference支持对底层对象 ...

  4. Cocos2d-x之Array

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Array是一个列表类容器,是一种线性序列结构:列表容器中的元素是有序的,可以通过下标来访问,就和数组一样.其中Vector也是一种列表容 ...

  5. C# 笔记 获取程序当前目录

    在C#中,我们有以下几种方式获取程序当前目录: Console.WriteLine(System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssem ...

  6. hashlib加密模块,加密方式:(MD5,sha级别)

    三,hashlib模块 算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一 ...

  7. Vue-基础(一)

    一.Vue中的常用指令 什么是指令? 指令就是vue中提供的一些对于页面和数据更为方便的操作, 指令就是以数据去驱动DOM行为的,简化DOM的操作 常用指令 v-text / v-html :用于为标 ...

  8. 在线px转换rem工具

    今天推荐一个在线工具,在线px转换rem工具 只要输入1rem = 多少px即可在线转换 和cssrem插件差不多的功能   rem在线转换工具: http://www.ofmonkey.com/fr ...

  9. L2Dwidget

    只需要在[页首html代码]中引入L2Dwidget.js即可.<!-- 右下角live2d效果 --> <script src="https://eqcn.ajz.mie ...

  10. go语言从例子开始之Example22.协程之通道

    通道 是连接多个 Go 协程的管道.你可以从一个 Go 协程将值发送到通道,然后在别的 Go 协程中接收. Example: package main import "fmt" f ...