快速搜索列表 - 查找张三、李四、王五等

<div id="app">
  <input placeholder="请输入要查找的内容" v-model="query">
  <fade :query="query" :items="items">
    <li v-for="(item, index) in filteredItems" :key="item.msg" :data-index="index">{{ item.msg }}</li>
  </fade>
</div>
<template id="fade-template">
  <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false">
    <slot></slot>
  </transition-group>
</template>
<script>
  Vue.component('fade', {
    props: ['query', 'items'],
    template: '#fade-template',
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0;
        el.style.height = 0;
      },
      enter(el, done) {
        const delay = el.dataset.index * 150;
        setTimeout(() => {
          Velocity.animate(el, { opacity: 1, height: '1.6em' }, { complete: done });
        }, delay);
      },
      leave(el, done) {
        const delay = el.dataset.index * 150;
        setTimeout(() => {
          Velocity.animate(el, { opacity: 0, height: 0 }, { complete: done });
        }, delay);
      }
    },
    computed: {
      filteredItems() {
        const query = this.query.toLowerCase();
        return this.items.filter(item => item.msg.toLowerCase().indexOf(query) !== -1);
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      query: '',
      items: [
        { msg: '张三' },
        { msg: '李四' },
        { msg: '王五' },
        { msg: '徐凤年' },
        { msg: '李纯' },
      ]
    }
  });
</script>