<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 v-text="item.name"></td>
          <td>{{ item.ctime | dateFormat() }}</td>
          <td>
            <a href="" @click.prevent="del(item.id)">刪除</a>
          </td>
        </tr>
      </tbody>
    </table> 

Vue.filter('dateFormat', function (dateStr, pattern = "") {
      // 根據給定的時間字串，得到特定的時間
      var dt = new Date(dateStr)

      //   yyyy-mm-dd
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()

      // return y + '-' + m + '-' + d
      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.directive() 定義全域性的指令  v-focus
    // 其中：引數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 字首, 
    // 但是： 在呼叫的時候，必須 在指令名稱前 加上 v- 字首來進行呼叫
    //  引數2： 是一個物件，這個物件身上，有一些指令相關的函式，這些函式可以在特定的階段，執行相關的操作
    Vue.directive('focus', {
      bind: function (el) { // 每當指令繫結到元素上的時候，會立即執行這個 bind 函式，只執行一次
        // 注意： 在每個 函式中，第一個引數，永遠是 el ，表示 被綁定了指令的那個元素，這個 el 引數，是一個原生的JS物件
        // 在元素 剛綁定了指令的時候，還沒有 插入到 DOM中去，這時候，呼叫 focus 方法沒有作用
        //  因為，一個元素，只有插入DOM之後，才能獲取焦點
        // el.focus()
      },
      inserted: function (el) {  // inserted 表示元素 插入到DOM中的時候，會執行 inserted 函式【觸發1次】
        el.focus()
        // 和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效
      },
      updated: function (el) {  // 當VNode更新的時候，會執行 updated， 可能會觸發多次

      }
    })

methods: {
        add() { 
          var car = { id: this.id, name: this.name, ctime: new Date() }
          this.list.push(car)
          this.id = this.name = ''
        },
        del(id) { 
          /* this.list.some((item, i) => {
            if (item.id == id) {
              this.list.splice(i, 1)
              // 在 陣列的 some 方法中，如果 return true，就會立即終止這個陣列的後續迴圈
              return true;
            }
          }) */
          var index = this.list.findIndex(item => {
            if (item.id == id) {
              return true;
            }
          })
          this.list.splice(index, 1)
        },
        search(keywords) { // 根據關鍵字，進行資料的搜尋
          /* var newList = []
          this.list.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          return newList */

          // 注意：  forEach   some   filter   findIndex   這些都屬於陣列的新方法，
          //  都會對陣列中的每一項，進行遍歷，執行相關的操作；
          return this.list.filter(item => {
            // if(item.name.indexOf(keywords) != -1)

            // 注意 ： ES6中，為字串提供了一個新方法，叫做  String.prototype.includes('要包含的字串')
            //  如果包含，則返回 true ，否則返回 false
            //  contain
            if (item.name.includes(keywords)) {
              return item
            }
          })

          // return newList
        }
      }