1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <div id="app">
    14.         <div>
    15.             <label>
    16.                 id:<input type="text" v-model="id">
    17.             </label>
    18.             <label>
    19.                 <!-- @keyup.enter="add" 松开键盘,并且按下回车就会触发add方法 -->
    20.                 name:<input type="text" v-model="name" @keyup.enter="add">
    21.             </label>
    22.             <label>
    23.                 <input type="button" value="添加" @click="add">
    24.             </label>
    25.             <label>
    26.                 <!-- 调用自定义指令v-focus -->
    27.                 <input type="text" v-model="keywords" v-focus v-color="'springgreen'">
    28.                 <input type="button" value="搜索" @click="serach(keywords)" >
    29.             </label>
    31.         </div>
    34.         <table border="1" style="margin-top: 20px;">
    35.             <thead>
    36.                 <tr>
    37.                     <th>id</th>
    38.                     <th>name</th>
    39.                     <th>ctime</th>
    40.                     <th>操作</th>
    41.                 </tr>
    42.             </thead>
    43.             <tbody>
    44.                 <tr v-for="(item, index) in serach(keywords)" :key="index">
    45.                     <td>{{item.id}}</td>
    46.                     <td>{{item.name}}</td>
    47.                     <td>{{item.ctime}}</td>
    48.                     <td><a href="" @click.prevent="del(item.id)">删除</a></td>
    49.                 </tr>
    50.             </tbody>
    52.         </table>
    53.     </div>
    54.     <script>
    60.         // 自定义全局键盘修饰符
    61.         // Vue.config.keywords.f2 = "113";
    63.         //定义一个自定指令,名字叫focus,在调用的时候,加上v-前缀进行调用 
    64.         Vue.directive('focus', {
    65.             // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    66.             // 加载到内存 调用bind  和样式相关的,放入bind里面
    67.             bind: function (el) {
    68.                 // console.log("bind")
    69.                 // el.focus();
    70.             },
    72.             // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
    73.             // 从内存到页面, 和js行为相关的一般放inserted里面
    74.             inserted: function (el) {
    75.                 el.focus();
    76.             },
    78.             updated: function (el) {
    79.                 // el.focus();
    80.             }
    81.         })
    85.         Vue.directive('color', {
    86.             // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    87.             // 加载到内存 调用bind  和样式相关的,放入bind里面
    89.             // binding是一个对象,里面有自定义属性的值
    90.             bind: function (el, binding) {
    91.                 console.log(binding)
    92.                 el.style.color = binding.value;
    93.             }
    94.         })
    97.         var vm = new Vue({
    98.             el: '#app',
    99.             data: {
    100.                 id: "",
    101.                 name: "",
    102.                 keywords: "",
    103.                 list: [
    104.                     { id: 1, name: "奔驰", ctime: new Date() },
    105.                     { id: 2, name: "宝马", ctime: new Date() },
    106.                 ]
    107.             },
    108.             methods: {
    109.                 add() {
    110.                     var obj = { id: this.id, name: this.name, ctime: new Date() };
    111.                     this.list.push(obj);
    112.                     this.id = '';
    113.                     this.name = '';
    114.                 },
    115.                 del(id) {
    116.                     // 根据id查找索引
    117.                     // 根据索引删除对应的对象
    119.                     // 方法二
    120.                     var index = this.list.findIndex(item => {
    121.                         if (item.id == id) {
    122.                             return true
    123.                         }
    124.                     })
    125.                     console.log(index)
    126.                     // this.list.splice(index, 1)
    129.                     // 方法一
    130.                     // 在数组some方法中,如果return true,就立刻终止这个数组的后续循环
    131.                     this.list.some((v, i) => {
    132.                         if (v.id == id) {
    133.                             this.list.splice(i, 1)
    134.                             return true
    135.                         }
    136.                     })
    138.                 },
    142.                 serach(keywords) {
    143.                     // 第一种方法
    144.                     var newlist = [];
    145.                     this.list.forEach(item => {
    146.                         //  item.name.indexOf(keywords) != -1 名字包含就push到新数组中去
    147.                         if (item.name.indexOf(keywords) != -1) {
    148.                             newlist.push(item)
    149.                         }
    150.                     });
    151.                     return newlist
    153.                     // 第二种方法
    154.                     //  var newlist = this.list.filter(item=>{
    155.                     //      if (item.name.includes(keywords)) {
    156.                     //          return item
    157.                     //      }
    158.                     //  })
    159.                     //  return newlist
    160.                 }
    164.             }
    165.         });
    166.     </script>
    167. </body>
    169. </html>

    访问页面,鼠标自动聚焦到搜索输入框
    image.png