vue的品牌添加与筛选的功能集合

<!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/[email protected]/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的品牌添加与筛选的功能集合

猜你喜欢
